Question

我试图取得成就，我不确定如何接近它。

我在data.csv文件中有一个示例数据，如下所示：

State,p1,p2,p3,p4,p5,p6,p7
AL,0.5,0.5,0.5,1,1,1,1,1,1
AK,1,1,1,1,1,1,1,1,1

现在，每个数据值都是100.这看起来不错但是如果我更改了值，我的条形图会发生变化，需要修复（x轴应该始终为0-7）因为它代表了一周的数据这个案例。

我之所以不希望我的图表依赖数据，是因为数据仅用于颜色表示，而不是宽度。因此，如果值为80-100，则将其设为绿色。但我稍后会弄明白。

我在Highcharts中取得了预期的效果，但我更喜欢D3。

我在这里使用Highcharts做到了，我希望得到这样的结果：http://jsfiddle.net/21udsf05/3/

在我阅读this answe之后，我为我的案例实现了相同的代码：来自@mbostock的http://plnkr.co/edit/SgrHixnqnLHcra3Tv65H?p=preview。

我感谢任何帮助！

Answer 1

这是我的解决方案：

首先，由于这里最重要的是根据值着色条形，使用阈值比例：

var color = d3.scale.threshold()
    .domain([0.25, 0.75])
    .range(['green', 'yellow', 'red']);

在此示例中，如果值小于0.25，则条形为绿色，介于0.25和0.75之间，条形为黄色，超过0.75条形为红色。无论如何，这只是一个让你了解想法，以你想要的方式改变领域和范围的例子。

之后，将值放在ages数组中：

data.forEach(function(d) {
    var y0 = 0;
    d.ages = agesDomain.map(function(name) {
        return {
            name: name,
            value: d[name],
            y0: y0,
            y1: y0 += +d[name]
        };
    });
    d.total = d.ages[d.ages.length - 1].y1;
});

最后，将所有条形设置为相同的宽度，并按值

着色

state.selectAll("rect")
    .data(function(d) {
        return d.ages;
    })
    .enter().append("rect")
    .attr("height", y.rangeBand())
    .attr("x", function(d, i) {
        return x(i);
    })
    .attr("width", x(1))
    .style("fill", function(d) {
        return color(d.value);
    });

以下是您的傻瓜，我更改了数据只是为了让图表更加多样化：http://plnkr.co/edit/fFwTn9m4MedOL06HxbK8?p=preview

从csv加载数据但以不同的方式表示D3 - 水平堆叠条

1 个答案: