Dimple.js - 爲條形圖的每個條形圖添加數據標籤

Question

我使用的是基於d3.js的dimple.js。是否可以添加數據標籤在這個例子中http://dimplejs.org/examples_viewer.html?id=bars_vertical

<div id="chartContainer"> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <script src="http://dimplejs.org/dist/dimple.v1.min.js"></script> 
    <script type="text/javascript"> 
    var svg = dimple.newSvg("#chartContainer", 590, 400); 
    d3.tsv("/data/example_data.tsv", function (data) { 
     var myChart = new dimple.chart(svg, data); 
     myChart.setBounds(60, 30, 510, 305) 
     var x = myChart.addCategoryAxis("x", "Month"); 
     x.addOrderRule("Date"); 
     myChart.addMeasureAxis("y", "Unit Sales"); 
     myChart.addSeries(null, dimple.plot.bar); 
     myChart.draw(); 
    }); 
    </script> 
</div> 

提到的條形圖的每個條像http://mbostock.github.io/d3/tutorial/bar-1.html

Answer 1

是補充說，這是非常可能的。

在Dimple.js網站的「高級欄標籤」部分，它們顯示了一個例子。 Click here看到它。

我使用了相同的技術將條形標籤添加到您發佈的代碼段。

注意：我保留的評論幾乎相同，以便您可以理解代碼上發生了什麼。另外，爲了測試目的，我改變了圖表的大小。

嘗試了這一點：

<div id="chartContainer"> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://dimplejs.org/dist/dimple.v1.min.js"></script> 
<script type="text/javascript"> 
    var svg = dimple.newSvg("#chartContainer", 1100, 600); 
    d3.tsv("/example_data.tsv", function(data) { 
     var myChart = new dimple.chart(svg, data); 
     myChart.setBounds(60, 30, 900, 400) 
     var x = myChart.addCategoryAxis("x", "Month"); 
     x.addOrderRule("Date"); 
     var y = myChart.addMeasureAxis("y", "Unit Sales"); 
     var s = myChart.addSeries("Sales", dimple.plot.bar); 
     myChart.draw(); 

     // After drawing we can access the shapes and their associated data 
     // to add labels. 
     s.shapes.each(function(d) { 

      // Get the shape as a d3 selection 
      var shape = d3.select(this), 

      // Get the height and width from the scales 
      height = myChart.y + myChart.height - y._scale(d.height); 
      width = x._scale(d.width); 

      // Add a text label for the value 
      svg.append("text") 

      // Position in the centre of the shape (vertical position is 
      // manually set due to cross-browser problems with baseline) 
      .attr("x", parseFloat(shape.attr("x")) + width/2 - 15) 
      .attr("y", parseFloat(shape.attr("y")) - height/2) 

      // Centre align 
      .style("text-anchor", "middle") 
      .style("font-size", "10px") 
      .style("font-family", "sans-serif") 

      // Make it a little transparent to tone down the black 
      .style("opacity", 0.7) 

      // Format the number 
      .text(d3.format(",.1f")(d.yValue/1000) + "k"); 
     }); 
    }); 
    </script> 

希望這有助於！