Question

我使用d3绘制了直方图，因为我使用json调用了值。我想要着色大于某个值的值。

d3.json('stk.json', function (data) {
            // just to have some space around items. 

        data =   $.each(data.stackoverflow,function(i,stack){

                 return {bucket: stack.x1, N: stack.y};      
            });     


         x.domain(data.map(function (d) { return d.x1; }));
        y.domain([0, d3.max(data, function (d) { return d.y; })]);

    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0, "+(height-pad)+")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate("+(left_pad-pad)+", 0)")
        .call(yAxis);

    svg.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr('class', 'bar')
        .attr('x', function (d) { return x(d.x1); })
        .attr('width', x.rangeBand())
        .attr('y', height-pad)
        .transition()
        .delay(function (d) { return d.x1*20; })
        .duration(800)
        .attr('y', function (d) { return y(d.y); })
        .attr('height', function (d) { return height-pad - y(d.y); })
        .style("fill", function(d) { return color(d.y); });

});

有人可以帮助我。

Answer 1

你的答案就在这个留置权上

One

只需在该功能的一侧提供你的逻辑，并确保你返回适当的颜色，例如假设你想要超过5的所有条形都是红色你只是做

.style("fill", function(d) { return color(d.y); });

希望这会有所帮助

如何在直方图中为大于特定值的值着色

1 个答案: