在直方圖的每個條上添加文本

Question

我在直方圖中添加文本時出現問題。我可以用更簡單的例子來做到這一點。

我嘗試這樣做：

// try to add bar value 
var barnum = g.selectAll('text') 
       .data(layout) 
       .enter() 
       .append("text") 
       .attr('y',-10) 
       .attr('x',10) 
       .attr("text-anchor", "middle") 
       .style("fill","black") 
       .text('testtest') 
       .style("pointer-events", "none") 
     ; 
    barnum.transition(); 

我看不到我的身影任何文本。該代碼包括定義是在這裏：

var dateFormat = d3.time.format("%Y-%m-%d"); 
    var g; 
    var data; 
    var margin = {top: 30, right: 30, bottom: 80, left: 80}, 
     width = 500 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 
    var cx = 10; 
    var numberBins = 5; 
    var dispatch = d3.dispatch(chart, "hover"); 

    function chart(container) { 
    g = container; 

    update(); 
    } 
    chart.update = update; 
    function update() { 

    // create hist layout 
    var hist = d3.layout.histogram() 
        .value(function(d) { return d.selectvar }) 
        .range([d3.min(data, function(d){ return d.selectvar }) ,   d3.max(data, function(d){ return d.selectvar }) ]) 
        .bins(numberBins); 
    var layout = hist(data); 

    var maxLength = d3.max(layout, function(d) { return d.length }); 
    var widthScale = d3.scale.linear() 
         .domain([0, maxLength]) 
         .range([0, width]) 

    var yScale = d3.scale.ordinal() 
        .domain(d3.range(numberBins)) 
        .rangeBands([height, 0], 0) 

    var colorScale = d3.scale.category20(); 

    // create svg 
    var rects = g.selectAll("rect") 
       .data(layout) 

    rects.enter().append("rect") 

    rects .transition() 
      .duration(500) 
      .attr({ 
      y: function(d,i) { 
       return yScale(i) 
      }, 
      x: 50, 
      height: yScale.rangeBand(), 
      width: function(d,i) { 
       return widthScale(d.length) 
      }, 
      fill: function(d, i) { return colorScale(i) } 
      }); 

    rects.exit().transition().remove(); 


// try to add bar value 
    var barnum = g.selectAll('text') 
        .data(layout) 
        .enter() 
        .append("text") 
        .attr('y',-10) 
        .attr('x',10) 
        .attr("text-anchor", "middle") 
        .style("fill","black") 
        .text('testtest') 
        .style("pointer-events", "none") 
      ; 
     barnum.transition(); 

是有什麼毛病我的方法來創建SVG元素？我從一開始就發現了一些成功的案例使用append（'g'）。新的d3.js！謝謝。

Answer 1

您正在使用d3.dispatch，它記錄在標題爲Internals的頁面上。這並不意味着你不應該使用它，而應該不是你的第一選擇。

你說的沒錯，我的方式創建svg元素 - 你沒有創建一個！嘗試：

var svg = d3.select("body").append("svg"); 
var g = svg.append("g"); 

在這一點上，你需要有DOM，SVG的標準，CSS選擇器，和D3的選擇API有很好的理解，使事情的工作。你不告訴D3把標籤放在你的酒吧，就是這樣。你必須指導它創建什麼元素，以及在哪裏跟蹤翻譯和偏移等。你最好複製並研究Mike Bostock的many examples。

D3學得不快。在製作任何你喜歡的圖表之前，你需要花時間學習它。