javascript - 水平条形图 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 将用于宽度，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>