Question

您好我正在尝试将颜色填充添加到具有线性比例的条形图中。我正在尝试的代码不会工作。你能不能让我知道我做错了什么。对不起，我是D3jS和JavaScript的新手。

谢谢！

<script>
        var data = [{ "MonthYearShortName": "2014-09-13T00:00:00", "Product": "Deposits", "Actual": 330393232.5, "Forecast": 495589848.75, "Target": 495589848.75 }, { "MonthYearShortName": "2014-09-13T00:00:00", "Product": "Fee Based", "Actual": 111868709.42, "Forecast": 167803064.13, "Target": 167803064.13 }, { "MonthYearShortName": "2014-09-13T00:00:00", "Product": "Lending", "Actual": 18146873.33, "Forecast": 27220309.995, "Target": 27220309.995 }];

        var color = d3.scale.linear()
            .domain(0, function (d) { return max(d.Actual); })
            .range(["#f3c40e", "#7d6507"]);

        var width = 420,
            barHeight = 20;

        var x = d3.scale.linear()
            .domain([0, d3.max(data)])
            .range([0, width]);

        var chart = d3.select('#ReportContent_ReportContent svg')
            .attr("width", width)
            .attr("height", barHeight * data.length);

        var bar = chart.selectAll("g")
          .data(data, function (d) { return d.Actual; })
          .enter().append("g")
           .attr("transform", function (d, i) { return "translate(0," + i * barHeight + ")"; });

        bar.append("rect")
            .attr("width", function (d) { return d.Actual / 1000000; })
            .attr("height", function (d) { return d.Actual / 10000000;})
            .attr("fill", color);

        bar.append("text")
            .attr("x", function (d) { return x(d.Actual) - 3; })
            .attr("y", barHeight / 2)
            .attr("dy", ".35em")
            .text(function (d) { return d.Product; });
    </script>

Answer 1

您需要将功能传递给attr('fill, )，而不仅仅是一个比例。

    bar.append("rect")
        .attr("width", function (d) { return d.Actual / 1000000; })
        .attr("height", function (d) { return d.Actual / 10000000;})
        .attr("fill", function(d) { return color(d); );

您的比例似乎没有正确设置：

var color = d3.scale.linear()
        .domain(0, THIS NEEDS TO BE A VALUE)
        .range(["#f3c40e", "#7d6507"]);

domain的第二部分需要是一个值（或一个评估为一的函数）

Answer 2

此条形图存在的问题多于颜色代码，甚至一个修复需要更多调整。最简单的方法是使用FIDDLE，而不是试图压缩评论中的所有更改。

bar.append("rect")
    .attr("width", function (d) { return x(d.Actual); }) //change
    .attr("height", barHeight) //change
    .attr("fill", function(d) { return color(d.Actual);} ); //change

还有其他变化......域名设置不太正确，我还添加了一个边距，以便使用文本锚点显示文本。

无论如何，总的来说，我认为这会让你更接近你需要的东西。

D3jS色标不起作用

2 个答案: