डी 3

Question

में मल्टीलाइन एसवीजी टेक्स्ट अक्ष टिक्स मैं एक्स-अक्ष पर अक्ष टिक्स के रूप में प्रत्येक बार के लिए एक लेबल के साथ एक सरल बार ग्राफ प्रस्तुत करने का प्रयास कर रहा हूं। लंबे समय तक एक दूसरे पर चलने वाले लेबल। चूंकि svg टेक्स्ट तत्व शब्द-रैपिंग का समर्थन नहीं करते हैं, इसलिए मैं वैकल्पिक समाधानों की तलाश में हूं।

उचित <tspan> तत्वों को शामिल करने के लिए लेबल में जाने वाले श्रेणी टेक्स्ट को बदलना पाठ काम नहीं करता है क्योंकि पाठ आंतरिक HTML के रूप में सेट नहीं है बल्कि केवल तत्व का कच्चा पाठ है। मैंने पाठ को हटाने और लेबल को बदलने के लिए लेबल्स को पोस्ट-प्रोसेसिंग भी माना है, लेकिन मुझे अभी तक ऐसा करने का एक शानदार तरीका नहीं मिला है।

दुर्भाग्य से मैं विदेशी ऑब्जेक्ट का उपयोग नहीं कर सकता क्योंकि मुझे आईई 9 समर्थन की आवश्यकता है, लेकिन वही मार्कअप प्रतिस्थापन समस्याएं उस समाधान पर लागू होंगी, वैसे भी।

क्या किसी ने इस समस्या को अतीत में हल किया है या कोई सुझाव है?

Answer 1

आप माइक Bostock द्वारा this example में के रूप में मैन्युअल रैपिंग कर सकते हैं:

function wrap(text, width) { 
    text.each(function() { 
    var text = d3.select(this), 
     words = text.text().split(/\s+/).reverse(), 
     word, 
     line = [], 
     lineNumber = 0, 
     lineHeight = 1.1, // ems 
     y = text.attr("y"), 
     dy = parseFloat(text.attr("dy")), 
     tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); 
    while (word = words.pop()) { 
     line.push(word); 
     tspan.text(line.join(" ")); 
     if (tspan.node().getComputedTextLength() > width) { 
     line.pop(); 
     tspan.text(line.join(" ")); 
     line = [word]; 
     tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); 
     } 
    } 
    }); 
} 

vis.selectAll(".tick text") 
    .call(wrap, 100);