[英]Struggling to get a chart with modified JSON format
我是d3js的新手。 我使用一个json文件制作了条形图。 它工作得很好。 但是现在由于某些不可避免的原因,我更改了JSON文件格式。
我以前的json是:
[
{"name":"bike","value":98},
{"name":"car","value":52},
{"name":"bus","value":20},
{"name":"van","value":65}
]
代码是:
d3.json("sample.json", function(error, data) {
x.domain(data.map(function(d) { return d.name; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
var chart = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.call(yAxis);
var bar = chart.selectAll(".bar")
.data(data)
.enter().append("g");
bar.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("width", x.rangeBand())
.attr("height", function(d) { return height - y(d.value); });
});
这是我的新json文件:
[
{"category":"bike","bike":38,"car":0,"bus":0,"van":0},
{"category":"car","bike":0,"car": 50,"bus":0,"van":0,},
{"category":"bus","bike":0,"car": 0,"bus":14,"van":0},
{"category":"van","bike":0,"car": 0,"bus":0,"van":43}
]
我想获得一张与上一张相同的图表。 带有“ 0”(零)的数据不应出现在图表中。 请帮助我。 提前致谢 :)
您没有提供新格式的说明,也不确定您以前的格式是如何工作的(考虑到x
属性设置),但是调整新格式应该很简单
.attr("x", function(d) { return x(d.category); })
.attr("y", function(d) { return y(d[d.category]); })
以及其他地方的类似变化。 (例如,高度)
还是我想念什么?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.