D3.js - JSON से स्टैक्ड बारचार्ट?

Question

मैं इस पहेली को फिर से बनाने की कोशिश कर रहा हूं: https://jsfiddle.net/1c5eqrp3/3/

एक क्षैतिज स्टैक्ड बार चार्ट के संदर्भ में जिसे मैं अपने डेटा का उपयोग करके बना रहा हूं।

var bar1Data = [{
    position: 1,
    label: '70k',
    value: 1708026
  },
  {
    position: 2,
    label: '71K - 149K',
    value: 1915059
  },
];

//sort bars based on value
bar1Data = bar1Data.sort(function(a, b) {
  return d3.ascending(a.position, b.position);
})

var colors = ['green', 'blue'];

var bars = d3.select('#bars')
  .append('svg')
  .attr('width', 800)
  .attr('height', 200);

bars.selectAll('rect')
  .data(bar1Data)
  .enter()
  .append('rect')
  .attr('width', function(d) {
    return d;
  })
  .attr('x', function(d, i) {
    return sum(bar1Data.value, 0, i);
  })
  .attr('fill', function(d, i) {
    return colors[i];
  })
  .attr('y', 0)
  .attr('height', 100);

function sum(array, start, end) {
  var total = 0;
  for (var i = start; i < end; i++) total += array[i];
  return total;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="bar"></div>

सब ठीक चल रहा था, जब तक कि मैंने इसे बनाया बारटाटा पढ़ने की कोशिश नहीं की।

अब, मुझे निम्नलिखित त्रुटियाँ मिल रही हैं:

Error: <rect> attribute width: Expected length, "[object Object]".
(anonymous) @ d3.js:1211
selection_each @ d3.js:1176
selection_attr @ d3.js:1233
(anonymous) @ bars3.js:23
Promise.then (async)
(anonymous) @ bars3.js:1
bars3.js:33 Uncaught (in promise) TypeError: Cannot read property '0' of undefined
    at sum (bars3.js:33)
    at SVGRectElement.<anonymous> (bars3.js:26)
    at SVGRectElement.<anonymous> (d3.js:1209)
    at Selection.selection_each [as each] (d3.js:1176)
    at Selection.selection_attr [as attr] (d3.js:1233)
    at bars3.js:25

मैं d3.v5 का उपयोग करके एक खड़ी क्षैतिज बार चार्ट बनाने के लिए बहुत संघर्ष कर रहा हूं। मैं d3.v4 का उपयोग करके विभिन्न उदाहरणों की कोशिश कर रहा हूं, लेकिन मैं उन्हें काम करने में सक्षम नहीं कर पाया हूं। यह सबसे सरल, सबसे हल्का उदाहरण है जो मैंने पाया है। लेकिन इसमें अभी तक तराजू शामिल नहीं है (जो मुझे उम्मीद है कि थोड़ी देर में डाल दिया जाएगा)।

क्या आप कृपया स्पष्टीकरण के साथ इस मुद्दे को हल करने में मेरी मदद कर सकते हैं?

Answer 1

में .attr('width', function(d){ return d;}), आप बार की चौड़ाई को पूरे ऑब्जेक्ट पर सेट कर रहे हैं d। आपको यह समझने की आवश्यकता है कि .data(bar1Data)प्रति मूल्य एक प्रविष्टि बनाता है bar1Data, और यह मान dउन सभी कार्यों की तरह सुलभ है। इसका मतलब है कि, जैसे ही आप पास हुए हैं .data(bar1Data), आपको उस वस्तु को सीधे नहीं छूना चाहिए।

अब, आपके डेटा से मुझे यह समझ में आ रहा है कि आप उस बिंदु तक संचयी राशि की गणना करने के लिए सभी पूर्ववर्ती प्रविष्टियों के मूल्यों का उपयोग करना चाहते हैं। मैं जवाब में इसे लागू करूंगा, लेकिन आपको उस ओर इशारा करना भी चाहूंगा stack = d3.stack(), जो आपके लिए करता है।

ध्यान दें कि आपके मूल्य बहुत बड़े हैं। आपको उन्हें डोमेन का उपयोग करके बदलने की आवश्यकता है, अन्यथा आपको प्रति डॉलर एक पिक्सेल (या पैसे की अन्य इकाई) मिलती है, जिसका अर्थ है कि सलाखों को आपके मॉनिटर की चौड़ाई 100 गुना खींची जाती है।

var bar1Data = [{
    position: 1,
    label: '70k',
    value: 50
  },
  {
    position: 2,
    label: '71K - 149K',
    value: 40
  },
];

//sort bars based on value
bar1Data = bar1Data.sort(function(a, b) {
  return d3.ascending(a.position, b.position);
})

var colors = ['green', 'blue'];

var bars = d3.select('#bars')
  .append('svg')
  .attr('width', 800)
  .attr('height', 200);

bars.selectAll('rect')
  .data(bar1Data)
  .enter()
  .append('rect')
  .attr('width', function(d) {
    return d.value;
  })
  .attr('x', function(d, i) {
    // Note that I use `.map` here to take only the `.value` attribute
    // from the data and create an array of numbers.
    return sum(bar1Data.map((e) => e.value), 0, i);
  })
  .attr('fill', function(d, i) {
    return colors[i];
  })
  .attr('y', 0)
  .attr('height', 100);

function sum(array, start, end) {
  var total = 0;
  for (var i = start; i < end; i++) total += array[i];
  return total;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id='bars'>
</div>