D3 막 대형 차트는 특정 막대에 화살표와 텍스트를 추가해야합니다.

Question

안녕하세요, 저는 d3.js 막 대형 차트를 사용하고 있습니다. 특정 바에 화살표와 텍스트를 표시하고 싶습니다. 이미지와 코드를 첨부했습니다.

var dataset = [{ "keyword": "0-10", "global": 500, }, { "keyword": "11-20", "global": 300, }, { "keyword": "21-30", "global": 90, }, { "keyword": "31-40", "global": 400, }, { "keyword": "41-50", "global": 600, }, { "keyword": "51-60", "global": 100, }, { "keyword": "61-70", "global": 560, }, { "keyword": "71-80", "global": 256, }, { "keyword": "81-90", "global": 198, }, { "keyword": "91-100", "global": 233, }]; 

    Graph(dataset); 
    function Graph(input) { 
     var margin = { 
      top: 15, 
      right: 10, 
      bottom: 60, 
      left: 60 
     }, w = 400 
      h = 220 - margin.top - margin.bottom; 
     var padding = 10; 

     // update the margin based on the title size 
     var titleSize = measure("Title of Diagram", "title"); 
     margin.top = titleSize.height + 20; 

     //Create X Scale for bar graph 
     var xScale = d3.scale.ordinal().domain(input.map(function (d) { 
      return d.keyword; 
     })).rangeRoundBands([0, w], 0.05); 

     //Create Y Scale for bar graph 
     var yScale = d3.scale.linear().domain([0, d3.max(input, function (d) { 
      return d.global; 
     })]).range([h, 0]); 

     //Create X Axis 
     var xAxis = d3.svg.axis().scale(xScale).orient("bottom"); 

     //Create Y Axis 
     var yAxis = d3.svg.axis().scale(yScale).orient('left').ticks(5); 

     //Create SVG element 
     var svg = d3.select("#dashboard-collection-bar-graph").append("svg").attr("width", w + margin.left + margin.right).attr("height", h + margin.top + margin.bottom).append('g').attr("viewBox", "0 0 100 100").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     //Create X axis 
     svg.append("g").attr("class", "axis x").attr("transform", "translate(0," + h + ")").call(xAxis).style("fill", "#515151");; 

     //Create Title 
     //svg.append("text").attr("x", w/2).attr("y", -titleSize.height + 10).attr("class", "title").style("text-anchor", "middle").text("Title of Diagram"); 

     //Create X axis label 
     svg.append("text").attr("x", w/1.2).attr("y", h + margin.bottom - 10).style("text-anchor", "middle").style("fill", "#515151").style("font-family", "arial").style("font-size", "12px").text("Grade Range (%)"); 
     //Create Y axis 
     svg.append("g").attr("class", "axis y").call(yAxis).style("fill", "#515151"); 

     //Create Y axis label 
     svg.append("text").attr("transform", "rotate(-90)").attr("y", 10 - margin.left).attr("x", 0 - (h/2)).attr("dy", "1em").style("text-anchor", "middle").style("fill", "#515151").style("font-family", "arial").style("font-size", "12px").text("Number of Students"); 

     //Add rectangles 

     svg.selectAll(".bar").data(input).enter().append("rect").attr("class", "bar") 
     //.style("fill", "red") 
     .attr("fill", function (d) { 
      var getValue = d.global; 
      if (getValue == 600) { 
       return "#1076BB"; 
      } else { 
       return "#88bbdd"; 
      } 
     }).attr("x", function (d) { 
      return xScale(d.keyword); 
     }).attr("y", function (d) { 
      return yScale(d.global) 
     }).attr("width", xScale.rangeBand()) //returns rangeRoundBands width 
     .attr("height", function (d) { 
      return h - yScale(d.global) 
     }); 

    }; // end Graph function 

    // create a dummy element, apply the appropriate classes, 
    // and then measure the element 
    function measure(text, classname) { 
     if (!text || text.length === 0) 
      return { 
       height: 0, 
       width: 0 
      }; 

     var container = d3.select('body').append('svg').attr('class', classname); 
     container.append('text').attr({ 
      x: -1000, 
      y: -1000 
     }).text(text); 

     var bbox = container.node().getBBox(); 
     container.remove(); 

     return { 
      height: bbox.height, 
      width: bbox.width 
     }; 
    } 

이렇게 출력됩니다.

나는이 다음과 같은 출력 (화살표 및 텍스트)로합니다. 상단의 파란색 막대에 같은 특정 줄에 화살표와 텍스트 (클래스 평균)를 추가하는 방법

. 나는 이것을 모른다. 이 일을 도와주세요.

Answer 1

This example은 화살표가있는 선을 만드는 방법을 보여줍니다. 그 후, 그것은 비교적 간단합니다. 적절한 위치에 텍스트와 줄을 추가하기 만하면됩니다. 원하는 요소 만 포함하도록 데이터를 필터링하면됩니다. 다음 코드는 텍스트에 해당합니다.

svg.selectAll("text.label") 
     .data(input.filter(function(d) { return d.global == 600; })) 
     .enter().append("text") 
     .attr("class", "label") 
     .attr("x", function (d) { 
      return xScale(d.keyword) + xScale.rangeBand()/2; 
     }).attr("y", function (d) { 
      return yScale(d.global) - 25; 
     }) 
     .style("text-anchor", "middle") 
     .text("Class average"); 

기본적으로 줄을 추가하는 코드는 동일합니다. 전체 예제 here.