Question

我对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”（零）的数据不应出现在图表中。请帮助我。在此先感谢：）

Answer 1

您没有提供有关新格式的说明，而且我不确定您以前的格式是如何工作的（考虑到x属性设置），但调整为新格式应该是就像

一样简单

.attr("x", function(d) { return x(d.category); })
.attr("y", function(d) { return y(d[d.category]); })

其他地方也有类似的变化。（例如，为高度）

或许我错过了什么？

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

1 个答案: