मुझे D3 के साथ एक विज़ुअलाइज़ेशन बनाना है जैसे कि फिगर बलो, टाइम-सीरीज़, स्टैक्ड बार में:< img alt="यहां छवि विवरण दर्ज करें" src="https://i.stack.imgur.com/Y1fFN.png"/>

डेटासेट इस प्रारूप में एक सलाहकार से आता है, जोसन ऑब्जेक्ट्स के नेस्टेड एरेज़:

[{
        "period": "6/2017",
        "data": [
            {
                "partner": "TR",
                "val": 5201888581
            },
            {
                "partner": "CH",
                "val": 8509470105
            },
            {
                "partner": "RU",
                "val": 10677690328
            },
            {
                "partner": "GB",
                "val": 16086915825
            },
            {
                "partner": "US",
                "val": 17817589838
            },
            {
                "partner": "CN",
                "val": 26120939253
            },
            {
                "partner": "TOTAL",
                "val": 145385348496
            }
        ]
    },
    {
        "period": "7/2017",
        "data": [
            {
                "partner": "TR",
                "val": 4832746886
            },
            {
                "partner": "CH",
                "val": 8194483975
            },
            {
                "partner": "RU",
                "val": 10082530447
            },
            {
                "partner": "US",
                "val": 15251181551
            },
            {
                "partner": "GB",
                "val": 15515343080
            },
            {
                "partner": "CN",
                "val": 27480148190
            },
            {
                "partner": "TOTAL",
                "val": 142118881451
            }
        ]
    },
    {
        "period": "8/2017",
        "data": [
            {
                "partner": "TR",
                "val": 4827335758
            },
            {
                "partner": "CH",
                "val": 7087004314
            },
            {
                "partner": "RU",
                "val": 10372167568
            },
            {
                "partner": "GB",
                "val": 14555013893
            },
            {
                "partner": "US",
                "val": 16838219917
            },
            {
                "partner": "CN",
                "val": 27876046083
            },
            {
                "partner": "TOTAL",
                "val": 143363806063
            }
        ]
    }
...
]

अधिक सटीक रूप से, प्रत्येक वस्तु में अवधि और वस्तुओं की एक उप-सरणी, देश कोड और मूल्य होता है:

{ 
  period,
  data: [{country,value},{country,value},{country,value}...]
}

डेटा सरणियों में 3 से 10 और विभिन्न देशों (वे संयुक्त राष्ट्र के देशों में से कोई भी हो सकते हैं) से अलग-अलग संख्या में ऑब्जेक्ट (देश रिकॉर्ड) होते हैं।

मैंने D3 (v5) में मानक लेआउट का उपयोग करने की कोशिश की जैसे "स्टैक" लेकिन, जैसा कि आप देखते हैं, मेरा डेटा d3 लेआउट में आवश्यक डेटा प्रारूप से मेल नहीं खाता है, अर्थात सारणीबद्ध डेटा जैसे:

time  field1  field2  field3
t1     v11     v12     v13
t2     v21     v22     v23
...

मुझे नहीं पता कि मैं अपने डेटा के साथ इसे कैसे प्रबंधित करूं, कृपया मदद करें। टीएक्स।

ले: मैंने चार्ट.जेएस के साथ भी कोशिश की लेकिन इसी तरह के मुद्दों के कारण असफल रहा।

0
Huqe Dato 14 अप्रैल 2020, 20:17

1 उत्तर

सबसे बढ़िया उत्तर

जैसे-जैसे देशों की संख्या भिन्न होती है, आप देशों के आयत तत्वों को जोड़ने के लिए अपना स्वयं का कार्य बना सकते हैं। उदाहरण नए फ़ंक्शन को कॉल करने के लिए d3.selection.each का उपयोग करता है, और इस फ़ंक्शन के भीतर, प्रत्येक रेक्ट के लिए y ऑफ़सेट के साथ एक नई डेटा सरणी बनाई जाती है।

    let data = [{
        "period": "6/2017",
        "data": [
            {
                "partner": "TR",
                "val": 5201888581
            },
            {
                "partner": "CH",
                "val": 8509470105
            },
            {
                "partner": "RU",
                "val": 10677690328
            },
            {
                "partner": "GB",
                "val": 16086915825
            },
            {
                "partner": "US",
                "val": 17817589838
            },
            {
                "partner": "CN",
                "val": 26120939253
            },
            {
                "partner": "TOTAL",
                "val": 145385348496
            }
        ]
    },
    {
        "period": "7/2017",
        "data": [
            {
                "partner": "TR",
                "val": 4832746886
            },
            {
                "partner": "CH",
                "val": 8194483975
            },
            {
                "partner": "RU",
                "val": 10082530447
            },
            {
                "partner": "US",
                "val": 15251181551
            },
            {
                "partner": "GB",
                "val": 15515343080
            },
            {
                "partner": "CN",
                "val": 27480148190
            },
            {
                "partner": "TOTAL",
                "val": 142118881451
            }
        ]
    },
    {
        "period": "8/2017",
        "data": [
            {
                "partner": "TR",
                "val": 4827335758
            },
            {
                "partner": "CH",
                "val": 7087004314
            },
            {
                "partner": "RU",
                "val": 10372167568
            },
            {
                "partner": "GB",
                "val": 14555013893
            },
            {
                "partner": "US",
                "val": 16838219917
            },
            {
                "partner": "CN",
                "val": 27876046083
            },
            {
                "partner": "TOTAL",
                "val": 143363806063
            }
        ]
    }]
    
    let width = 500
    let height = 500
    let margin = 50
    
    let x = d3.scaleBand()
    	.domain(["6/2017","7/2017","8/2017"])
    	.range([0, width])
    	.padding(0.3)
    
    let y = d3.scaleLinear()
    	.domain([0, 145385348496])
    	.range([height, 0])
      
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin + margin)
      .attr("height", height + margin + margin)

    var g = svg.append("g")
      .attr("transform", "translate(" + margin + ", " + margin + ")")
    
    var periods = g.selectAll("g")
    	.data(data)
    	.enter()
    	.append("g")
    	.attr("class", "period")
    	.attr("transform", function(d){
        return "translate(" + x(d.period) + ", " + 0 + ")"
      })
    	.each(appendCountries)
    
    function appendCountries(period, i){
      
      let countries = []
      let offset = 0
      let colour = d3.scaleOrdinal(d3.schemeAccent);
      
      period.data.forEach(function(c){
        if (c.partner != "TOTAL") { //assuming that total should not be included
          
          offset = offset + c.val
          
          let obj = {}
          obj.y = offset
          obj.val = c.val
          obj.partner = c.partner
          countries.push(obj)
          
        }
      })
      
      let rects = d3.select(this).selectAll("rect")
      	.data(countries)
      	.enter()
      	.append("rect")
      	.attr("width", x.bandwidth)
      	.attr("x", 0)
      	.attr("y", d => y(d.y))
				.attr("height", d => height - y(d.val))
      	.style("fill", d => colour(d.partner))
      	.style("stroke", "white")
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
1
Tom Shanley 14 अप्रैल 2020, 21:37