Javascript 创建简单的D3条形图

嗯，这是一个noob问题。我刚刚开始探索D3jS库

我现在正在尝试创建一个简单的条形图。由于某些原因，无法创建图表。请告诉我哪里出了问题

 <style>.chart div {
    background-color:red;
    border:1px solid blue;
}</style>
 <div id="ReportContent_ReportContent" style="border: 1px solid #58595d; border: 1px solid rgba(88, 89, 93, .3);">

<svg></svg>
  </div>


 <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 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; })
        .attr("height", barHeight - 1)
        .attr("fill", "#000000");

    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>

.chart div{
背景色：红色；
边框：1px纯蓝色；
}
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宽度=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；}）
.attr（“高度”，酒吧高度-1）
.attr（“填充”，000000）；
附加条（“文本”）
.attr（“x”，函数（d）{返回x（d.Actual）-3；}）
.attr（“y”，酒吧高度/2）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.Product；}）；

问题之一是您试图访问属于数组的对象的属性

在这里：

请尝试这样做：

    var bar = chart.selectAll("g")
                   .data(data, function(d) {return d.Actual;}) 

---

我还没有亲自测试解决方案，但这应该可以消除其中一个错误。

Typo？尝试

d3。选择（“#ReportContent\u ReportContent”）

（注意不同的大写字母）。感谢您的更正。但尽管有了修正，什么也没发生。我检查了源代码，没有添加任何内容：（好吧，您的刻度错误，您的数据也有错误（以及其他一些内容）。请看一下如何创建条形图。谢谢@Larskothoff。我做了一些更改（我仍在学习）。矩形现在在源代码中创建。但是除了屏幕上的文本外，没有其他内容：（感谢您的提示。其中一个错误消失了。我假设数据也错了。但不确定是什么错了。以下是插入的节点之一。出于某种奇怪的原因，宽度设置为NaN。[对象]我更改了条形图。追加（“文本”）我追加了错误的属性。

    var bar = chart.selectAll("g")
                   .data(data, function(d) {return d.Actual;})