히스토그램의 각 막대에 텍스트 추가

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 요소를 만드는 방법이 잘못되었습니다. 나는 처음부터 성공적인 사례 사용 ('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은 빨리 학습되지 않습니다. 원하는 차트를 만들기 전에 학습 시간을 투자해야합니다.