我有一个名为 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并让它看起来像我想要的那样。
任何人都可以帮助我构建此图表并读取此数据。谢谢。
最佳答案
在文本文件中使用该结构没有多大意义。 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>
关于javascript - 水平条形图 D3,.txt 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39972749/