繁体   English   中英

努力获取具有修改后的JSON格式的图表

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM