如何使用API​​数组在D3.js中创建条形图

Question

我是D3.js的新手。我找到了一个生成条形图的小教程。但它正在使用一些数组值。如何附加以下数组值格式以生成条形图？

{
  "data": [
    {
      "id": "md",
      "totalHits": 12,
      "uniqueHits": 8,
      "lastHitDate": "20140425124618"
    },
    {
      "id": "us",
      "totalHits": 3,
      "uniqueHits": 2,
      "spiderHits": 1,
      "lastHitDate": "20140424144343"
    },
    {
      "id": "ie",
      "totalHits": 1,
      "spiderHits": 1,
      "lastHitDate": "20140416111004"
    }
  ]
}

我是从API获得的。

这是D3代码。

<script>
                            var dataArray = [12, 3, 3, 1];
                            var width = 400;
                            var height = 300;
                            var widthScale = d3.scale.linear()
                                            .domain([0,60])
                                            .range([0, width]);
                            var axis = d3.svg.axis()
                                        .scale(widthScale);


                            var canvas = d3.select("#diagram1")
                                        .append("svg")
                                        .attr("width", width)
                                        .attr("height", height)
                                        .append("g")
                                        .attr("transform", "translate(20, 0)");

                            var bars = canvas.selectAll("select")
                                        .data(dataArray)
                                        .enter()
                                            .append("rect")
                                            .attr("fill", "#484848")
                                            .attr("width", function(d) {return widthScale(d);})
                                            .attr("height", 50)
                                            .attr("y", function(d, i){return i*70;});

                            canvas.append("g")
                                .attr("transform", "translate(0,280)")
                                .call(axis);

我需要使用totalHits来创建条形图。请帮我。

Answer 1

你实际上非常接近一个有效的解决方案！缺少的是使用数据的totalHits部分。

您可以使用d3.json（）加载来自api的数据。

d3.json('/api/endpoint', function (error, results) {    
  var bars = canvas.selectAll("select")
    .data(results.data)
    .enter()
      .append("rect")
      .attr("width", function(d) { return widthScale(d.totalHits); })
      .attr("height", 50)
      .attr("y", function(d, i){return i*70;});
}

有关使用上述数据的完整示例，请参阅此jsfiddle：http://jsfiddle.net/willeeklund/YG7Bc/2/

图片的标题说明：

• 使用.data（）方法加载数据时，输入应为数组。
• 在.width方法中，您可以尝试注销d变量以进行调试。

祝你好运！

/意志