水平条形图D3，.txt文件

Question

我有一个名为data.txt的数据集，如下所示：

{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}}

我正在尝试用d3 v3为这些数据制作一个水平条形图。 我想要做的是将A + B + C的总和放在条形图上，但当您将鼠标悬停在它们上方时，图例会显示A，B，C值。 我希望此图表上的标签为C 1，C 2和C 3.我在阅读此数据时遇到问题。 我在尝试

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]);
});

但是，我无法获取要呈现的数据。 我在这里看了http://learnjsdata.com/read_data.html，但这对我没有帮助。 我也打算尝试按照这个条形图http://bl.ocks.org/juan-cb/faf62e91e3c70a99a306 ，让它看起来像我想要的。

任何人都可以帮我建立这个图表并阅读这些数据。谢谢。

Answer 1

在文本文件中使用该结构没有多大意义。 d3.text将无法解析它。 由于您具有嵌套对象的对象，因此您可能希望使用d3.json 。

首先，让我们用有效的JSON转换这些数据，在一个对象数组中转换它：

[
 {"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}}
]

然后，我们使用d3.json加载它：

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

但是，正如您在问题中所说，您想要使用nums对象的总数来表示条形图。 我们可以创建另一个名为total键/值对：

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

现在，您拥有条形所需的一切： total将用于工具提示的width和nums对象。

这是一个使用变量的演示片段（因为在代码片段中使用外部文件很困难）：

 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>