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对象。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

水平条形图D3，.txt文件

1 个答案: