Question

这是一个菜鸟问题。我刚刚开始探索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>

Answer 1

其中一个问题是您正在尝试访问属于该阵列的对象的属性。

下面：

    var bar = chart.selectAll("g")
                .data(data.Actual)

尝试这样做：

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

我自己没有测试过这个解决方案，但这应该摆脱其中一个错误。

创建一个简单的D3条形图

1 个答案: