Javascript D3jS色标不起作用

你好，我正在尝试添加颜色填充到我的条形图，它有一个线性比例。我正在尝试的代码不知何故不起作用。你能告诉我我做错了什么吗。对不起，我对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>

var数据=[{“MonthYearShortName”：“2014-09-13T00:00:00”，“产品”：“存款”，“实际”：33039232.5，“预测”：495589848.75，“目标”：495589848.75}，{“MonthYearShortName”：“2014-09-13T00:00:00”，“产品”：“基于费用”，“实际”：111868709.42，“预测”：167803064.13，“目标”：167803064.13}，{“MonthYearShortName”：“2014-09-13T00:00:00”，“产品”：“贷款”，“实际”：18146873.33，“预测”：2720309.995，“目标”：2720309.995}]；
var color=d3.scale.linear（）
.domain（0，函数（d）{返回最大值（d.Actual）；}）
.范围（[“#f3c40e”、“#7d6507”]）；
var宽度=420，
杆高=20；
var x=d3.scale.linear（）
.domain（[0，d3.max（数据）]）
.范围（[0，宽度]）；
var chart=d3。选择（“#ReportContent_ReportContent svg”）
.attr（“宽度”，宽度）
.attr（“高度”，条形高度*数据长度）；
变量条=图表。选择全部（“g”）
.data（数据，函数（d）{返回d.Actual；}）
.enter（）.append（“g”）
.attr（“transform”，函数（d，i）{return“translate（0，+i*barHeight+”）；}）；
附加条（“rect”）
.attr（“宽度”，函数（d）{返回d.Actual/1000000；}）
.attr（“高度”，函数（d）{返回d.Actual/10000000；}）
.attr（“填充”，颜色）；
附加条（“文本”）
.attr（“x”，函数（d）{返回x（d.Actual）-3；}）
.attr（“y”，酒吧高度/2）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.Product；}）；

您需要将一个函数传递给

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"]);

---

域的第二部分需要是一个值（或一个计算结果为1的函数）
此条形图的问题比色码多，即使是一个修复也需要更多的调整。最简单的方法是编写一个注释，而不是试图压缩注释中的所有更改

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

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

无论如何，总的来说，我认为这会让你更接近你所需要的。
谢谢@chopper。这句话现在说得通了。尽管我仍然没有在SVG标签下添加任何内容。我应该改变域名吗？有什么问题吗？谢谢是的，您需要更改域-请参阅“我的答案”的更新。没有（x，y）条位置。域可以类似于
[0，Math.max.apply（Math，data.map（函数（o）{return o.Actual；}]）]