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

您需要將函數傳遞給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

還有其他變化......域名設置不太正確，我還添加了一個邊距，以便使用文本錨點正確顯示文本。

無論如何，總的來說，我認為這會讓你更接近你需要的東西。