Dimple.js - Добавить метки данных на каждый столбец гистограммы

Question

Я использую dimple.js, основанный на d3.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> 

Надеется, что это помогает!