javascript - D3jS 色阶不起作用

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

此条形图的问题比颜色代码还多，即使是这一修复也需要更多的调整。最简单的事情就是处理 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

还有其他更改...域设置不太正确，我还添加了边距，以便使用文本 anchor 正确显示文本。

无论如何，总的来说，我认为这会让您更接近您的需求。