दिलचस्प पोस्ट
JQuery का उपयोग लक्ष्य तत्व पर क्लिक करने के लिए कैसे करें Xlsx को csv में लिनक्स कमांड लाइन में कनवर्ट करें htaccess प्रवेश नियंत्रण-अनुमति-उत्पत्ति स्प्रिंग एमवीसी – स्प्रिंग नियंत्रक के नक्शे में सभी अनुरोध पैरामीटर कैसे प्राप्त करें? किस परिस्थिति में एक स्क्वॉश कनेक्शन स्वचालित रूप से एक परिवेश लेन-देन लेन-देन लेन-देन में भर्ती है? स्थानीय चर की आवश्यकता क्यों होती है, लेकिन फ़ील्ड नहीं करते हैं? फ्लोट के एक वीएसी पर द्विआधारी खोज कैसे करें? साझा वरीयता में एक क्लास ऑब्जेक्ट को स्टोर और पुनः प्राप्त करें Matplotlib अक्ष में सापेक्ष बदलाव कैसे निकालें जावा में दो पूर्णांक arrays की तुलना करना मुझे ऐप्पल-टच-आइकन-प्रीकॉर्पोरेटेड के लिए त्रुटि क्यों मिल रही है Django South का उपयोग कर माइग्रेशन इतिहास को रीसेट करने के लिए अनुशंसित दृष्टिकोण क्या है? सी # ऑडियो लाइब्रेरी फोनगैप – एंड्रॉइड ऐप के लिए स्प्लैश स्क्रीन एक जीआईटी भंडार में, निर्देशिका को कैसे ठीक से नाम दिया जाए?

डी 3 चार्ट में लेबल में मैं न्यूलाइन कैसे शामिल करूं?

मैं एक बार चार्ट उत्पन्न करने के लिए डी 3 का उपयोग कर रहा हूं (मैं इस उदाहरण से कोड को अनुकूलित करता हूं)। जिन लेबल मैं उपयोग कर रहा हूँ, एक्स- एक्सिस, उनमें से कुछ शब्द लंबे होते हैं, और चूंकि यह सभी लेबलों को ओवरलैप करता है, इसलिए मुझे इन लेबल्स को लाइनों में तोड़ने की आवश्यकता होती है I (यह ठीक हो जाएगा अगर मैं न्यूलाइंस के साथ प्रत्येक लेबल में सभी जगहों को बदल सकता हूं।)

मैंने मूल रूप से इसे गए 'लेबल्स' <text> तत्वों पर ( ) और xml:space="preserve" साथ रिक्त स्थान बदलने की कोशिश की दुर्भाग्य से, यह पता चला है कि एसवीजी इस संपत्ति का सम्मान नहीं करता है। इसके बाद मैंने प्रत्येक शब्द को <tspan> में लपेटने की कोशिश की जो कि बाद में शैली कर सकती थी I मैंने इस फ़ंक्शन के माध्यम से प्रत्येक लेबल पास किया:

 function (text) { return '<tspan>' + text.replace(/ /g, '</tspan><tspan>') + '</tspan>'; } 

लेकिन यह सिर्फ सचमुच <tspan> s को आउटपुट में डालता है। मैं अपने टेक्स्ट लेबलों को tspan में कैसे लपेट सकता हूँ (या कुछ और करें) ताकि मेरी लेबल ओवरलैप न हों?

वेब के समाधान से एकत्रित समाधान "डी 3 चार्ट में लेबल में मैं न्यूलाइन कैसे शामिल करूं?"

मैं लाइनों में प्रत्येक एक्स- एक्सिस लेबल को तोड़ने के लिए निम्न कोड का उपयोग कर रहा हूं:

 var insertLinebreaks = function (d) { var el = d3.select(this); var words = d.split(' '); el.text(''); for (var i = 0; i < words.length; i++) { var tspan = el.append('tspan').text(words[i]); if (i > 0) tspan.attr('x', 0).attr('dy', '15'); } }; svg.selectAll('gxaxis g text').each(insertLinebreaks); 

ध्यान दें कि यह मानता है कि लेबल पहले ही बनाए गए हैं। (यदि आप कैनोनिकल हिस्टोग्राम के उदाहरण का पालन करते हैं तो लेबल्स को आपकी ज़रूरत के मुताबिक सेट किया गया होगा।) इसमें कोई वास्तविक लाइन-ब्रेकिंग लॉजिक मौजूद नहीं है; फ़ंक्शन प्रत्येक स्थान को एक नई लाइन में परिवर्तित करता है यह मेरे उद्देश्यों को ठीक से फिट बैठता है, लेकिन आपको split() लाइन को इस बारे में चतुर होने के लिए संपादित करना पड़ सकता है कि स्ट्रिंग के कुछ हिस्सों को लाइनों में कैसे विभाजित किया जाता है।

एसवीजी पाठ तत्व पाठ-लपेटन का समर्थन नहीं करता है, इसलिए दो विकल्प हैं:

  • पाठ को कई एसवीजी पाठ तत्वों में विभाजित करें
  • एसवीजी के शीर्ष पर ओवरले एचटीएमएल डिवा का उपयोग करें

यहां इस पर माइक बोसॉक की टिप्पणी देखें

मैंने कुछ उपयोगी पाया है, टेक्स्ट या तपन तत्वों के बजाय 'विदेशी ऑब्जेक्ट' टैग का उपयोग कर रहा है यह HTML के सरल एम्बेडिंग के लिए अनुमति देता है, जिससे शब्दों को स्वाभाविक रूप से तोड़ने की अनुमति मिलती है। चेतावनी ऑब्जेक्ट मीटिंग विशिष्ट आवश्यकताओं की कुल आयाम है:

 var myLabel = svg.append('foreignObject') .attr({ height: 50, width: 100, // dimensions determined based on need transform: 'translate(0,0)' // put it where you want it... }) .html('<div class"style-me"><p>My label or other text</p></div>'); 

आप इस ऑब्जेक्ट के अंदर जो कुछ भी तत्व रखते हैं, उसे बाद में डी 3.select/selectAll का उपयोग करके प्राप्त किया जा सकता है ताकि पाठ मूल्यों को गतिशील रूप से अद्यतन किया जा सके।

चारों ओर देखने के बाद मैंने पाया कि माइक पॉसॉक ने पाठ का दौर लपेटने के लिए आपको एक समाधान प्रदान किया है।

http://bl.ocks.org/mbostock/7555321

इसे मेरे कोड पर कार्यान्वित करने के लिए (मैं संक्षिप्त पेड़ आरेख का उपयोग कर रहा हूं)। मैं बस "रैप" विधि की नकल की है

फिर निम्नलिखित को जोड़ा गया

  // Standard code for a node nodeEnter.append("text") .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) .attr("dy", ".35em") .text(function(d) { return d.text; }) // New added line to call the function to wrap after a given width .call(wrap, 40); 

मुझे कोई कारण नहीं दिख रहा है, यह बल-निर्देशित, बार या किसी अन्य पैटर्न के लिए काम नहीं करना चाहिए

संशोधन :

मैंने इसे पढ़ने वाले किसी भी व्यक्ति के लिए निम्नलिखित के लिए रैप फ़ंक्शन को संशोधित किया है और अस्पष्ट ग्राफ का उपयोग कर रहा है "एक्स" विशेषता में बदलाव को सही ढंग से सेट करता है, लिननेम को एक अलग पंक्ति पर बढ़ाया जाता है, क्योंकि मूल कोड में समस्याएं नोट की गई थीं और "y" को शून्य पर सेट किया गया है, अन्यथा समस्याएं उत्पन्न होती हैं जिसमें पंक्ति अंतर बढ़ जाता है प्रत्येक पंक्ति।

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

लंबे लेबल लपेटने पर भी यह जवाब है।

 <!DOCTYPE html> <meta charset="utf-8"> <style> .bar { fill: steelblue; } .bar:hover { fill: brown; } .title { font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif; } .axis { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .x.axis path { display: none; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var margin = {top: 80, right: 180, bottom: 80, left: 180}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1, .3); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(8, "%"); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.tsv("data.tsv", type, function(error, data) { x.domain(data.map(function(d) { return d.name; })); y.domain([0, d3.max(data, function(d) { return d.value; })]); svg.append("text") .attr("class", "title") .attr("x", x(data[0].name)) .attr("y", -26) .text("Why Are We Leaving Facebook?"); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll(".tick text") .call(wrap, x.rangeBand()); svg.append("g") .attr("class", "y axis") .call(yAxis); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.name); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.value); }) .attr("height", function(d) { return height - y(d.value); }); }); 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); } } }); } function type(d) { d.value = +d.value; return d; } </script> 

और डेटा फ़ाइल "data.tsv":

 name value Family in feud with Zuckerbergs .17 Committed 671 birthdays to memory .19 Ex is doing too well .10 High school friends all dead now .15 Discovered how to “like” things mentally .27 Not enough politics .12 

<tspan> उपयोग करें

और nv.d3 में

nv.models.axis = फ़ंक्शन () {

  .select('text') .attr('dy', '0em') .attr('y', -axis.tickPadding()) .attr('text-anchor', 'middle') .text(function(d,i) { var v = fmt(d); return ('' + v).match('NaN') ? '' : v; }); 

.text की सभी घटनाओं को बदलें (to .html (