水平条形图D3，.txt文件

Question

I have a dataset called data.txt that looks like the following:

{class:'C 1',nums:{A:716, B:1287, C:249}}

,{class:'C 2',nums:{A:2000, B:1876, C:3009}}

,{class:'C 3',nums:{A:899, B:2333, C:418}}

I am trying to make a horizontal bar chart with d3 v3 for this data. What I want to do is have the sum of A + B + C be on the bars but when you hover over them the legend shows A, B, C values. I want the labels on this chart to be C 1, C 2, and C 3. I am having trouble reading in this data. I am trying

d3.text("data.text",function(d) {
return {
label: d.class, 
Q1: +d.nums[1],
Q2: +d.nums[2],
Q3: +d.nums[3],
Q4: +d.nums[4],
total: Q1+Q2+Q3+Q4        
};
}, function(data) {
console.log(data[0]);
});

However, I can't get the data to render at all. I have looked here http://learnjsdata.com/read_data.html but this did not help me. I was also going to try and follow this bar chart http://bl.ocks.org/juan-cb/faf62e91e3c70a99a306 and make it look like how I had wanted.

Can anyone please assist me with building this chart and reading this data in. Thank you.

Answer 1

It doesn't make much sense using that structure in a text file. d3.text will not be able to parse it. Since you have objects with nested objects, you may want to use d3.json instead.

First, let's transform this data in a valid JSON, transforming it in an array of objects:

[
 {"class":"C 1","nums":{"A":716, "B":1287, "C":249}},
 {"class":"C 2","nums":{"A":2000, "B":1876, "C":3009}},
 {"class":"C 3","nums":{"A":899, "B":2333, "C":418}}
]

Then, we load it using d3.json :

d3.json("data.json", function(data){
    //your code here
});

But, as you said in the question, you want to use the total of the nums object for the bars. We can create another key/value pair named total :

data.forEach(function(d){
    var values = 0;
    for (var key in d.nums){
        values += d.nums[key]
    }
    d.total = values;
});

Now you have everything you need for the bars: total will be used for the width and nums object for the tooltip.

Here is a demo snippet, using a variable (because it's difficult using an external file in the snippet):

 data = [{"class":"C 1","nums":{"A":716, "B":1287, "C":249}} ,{"class":"C 2","nums":{"A":2000, "B":1876, "C":3009}} ,{"class":"C 3","nums":{"A":899, "B":2333, "C":418}}]; data.forEach(function(d){ var values = 0; for (var key in d.nums){ values += d.nums[key] } d.total = values; }); var div = d3.select("body").append("div").attr("class", "toolTip"); var xScale = scale = d3.scale.linear() .domain([0, d3.max(data, function(d) { return d.total; })]) .range([0, 400]); var svg = d3.select('body') .append("svg") .attr("width", 400) .attr("height", 400); var bars = svg.selectAll(".rects") .data(data) .enter() .append("rect"); bars.attr("x", 0).attr("y", function(d,i){ return i*50}) .attr("height", 40) .attr("fill", "teal") .attr("width", function(d){ return xScale(d.total)}); bars.on("mousemove", function(d){ div.style("left", d3.event.pageX+10+"px").style("top", d3.event.pageY-25+"px").style("display", "inline-block").html("All the values: A=" + d.nums.A + ", B=" + d.nums.B + ", C=" + d.nums.C); }).on("mouseout", function(d){ div.style("display", "none"); }); 

 .toolTip { position: absolute; display: none; width: auto; height: auto; padding: 5px; background-color: white; border: 1px solid black; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>