d3.js मल्टीलाइन श्रृंखला चार्ट

Question

पर किंवदंती जोड़ना मल्टीलाइन श्रृंखला चार्ट में कोई किंवदंती कैसे जोड़ सकता है? मैंने कोशिश की लेकिन मुझे प्रदर्शित करने के लिए कोई किंवदंती नहीं मिल रही है।

यहां ब्लॉक: जब विभिन्न श्रृंखला, एक ही बात करने के लिए अभिसरण शून्य की तरह

http://bl.ocks.org/3884955

एक दोष है। सभी लेबल एक दूसरे पर ओवरलेड होंगे। इन लेबलों के लिए जाने के बजाय, पारंपरिक किंवदंती उपयोगी होगी।

मैं कोड के अंत करने के लिए इस

var legend = svg.append("g") 
.attr("class", "legend") 
.attr("height", 100) 
.attr("width", 100) 
.attr('transform', 'translate(-20,50)');  

legend.selectAll('rect') 
    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
    .append("rect") 
    .attr("x", width) 
    .attr("y", function(d, i){ return i * 20;}) 
    .attr("width", 10) 
    .attr("height", 10) 
    .style("fill", function(d) { 
    return color.domain(d3.keys(d[0]).filter(function(key) { return key !== "day"; })); 
    }); 

legend.selectAll('text') 
    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
    .append("text") 
    .attr("x", width) 
    .attr("y", function(d, i){ return i * 20 + 9;}) 
    .text(function(d) { 
    return d.name; 
    }); 

जोड़ने की कोशिश की, कुंजी नाम (d.name) मैच कैसे मेरे डेटा स्वरूपित किया गया है, लेकिन यह प्रदर्शित नहीं करता है। एक समय यह ग्राफ के अधिकार के लिए सब ब्लैक बॉक्स से पता चला है तो इसका मतलब है कि मैं पास हूँ, लेकिन मैं कुछ महत्वपूर्ण याद आ रही है

किसी भी अंतर्दृष्टि की सराहना की

Answer 1

Here के लिए लिंक को देखने के है।

var legend = svg.selectAll('g') 
     .data(cities) 
     .enter() 
     .append('g') 
     .attr('class', 'legend'); 

    legend.append('rect') 
     .attr('x', width - 20) 
     .attr('y', function(d, i){ return i * 20;}) 
     .attr('width', 10) 
     .attr('height', 10) 
     .style('fill', function(d) { 
      return color(d.name); 
     }); 

    legend.append('text') 
     .attr('x', width - 8) 
     .attr('y', function(d, i){ return (i * 20) + 9;}) 
     .text(function(d){ return d.name; }); 

आप datum() के साथ उपयोग नहीं किया जा सकता हैenter(), लेकिन enter() और exit() तरीकों उपयोग करने के लिए की जरूरत है। d3 wiki

selection.datum से हवाला देते हुए ([value])

हो जाता है या प्रत्येक चयनित तत्व के लिए बाध्य डेटा सेट। Select.data विधि के विपरीत, यह विधि किसी सहभागी की गणना नहीं करती है (और इस प्रकार प्रवेश की गणना नहीं करता है और चयन से बाहर निकलता है)।

Answer 2

आप दर्ज() .datum के बाद लापता हो रहे हैं() फ़ंक्शन कॉल।

legend.selectAll('rect') 

    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 

    .enter() // <====== 

    .append("rect") 

    .attr("x", width) 

    .attr("y", function(d, i){ return i * 20;}) 

    .attr("width", 10) 

    .attr("height", 10) 

    .style("fill", function(d) { 

    return color.domain(d3.keys(d[0]).filter(function(key) { return key !== "day"; })); 

"रेक्ट" जोड़कर इससे पहले कि आप में प्रवेश() फ़ंक्शन अपने कोड की एक निश्चित & पुनर्संशोधित संस्करण का उपयोग करना चाहिए सटीक व्याख्या Click Here