バーの上部にテキストを表示し、d3のx軸のテキストの色を変更します

Question

私はホバー上にツールチップを表示するd3棒グラフを持っています。今、バーの上に値のテキストを表示し、バーがクリックされたときにx軸のラベルの色を変更するための特別な機能が必要です。なぜそれが表示されていないのか？そして、その特定のバーのx軸ラベルの色を変更する方法は？

var width = 400, height = 350; 
    var margin = {top: 90, right: 20, bottom: 30, left: 80}; 

    //data 
    var data = [ {"month":"JAN","patients":120}, {"month":"FEB","patients":50}, {"month":"MAR","patients":80}, {"month":"APR","patients":20}, {"month":"MAY","patients":100}, {"month":"JUN","patients":350}]; 

    //x and y Scales 
    var xScale = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .1); 

    var yScale = d3.scale.linear() 
    .range([height, 0]); 

    xScale.domain(data.map(function(d) { return d.month; })); 
    yScale.domain([0, d3.max(data, function(d) { return d.patients; })]); 

    //x and y Axes 
    var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .orient("bottom") 
    .outerTickSize(0); 

    var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("left"); 


    var tip = d3.tip() 
    .attr('class', 'd3-tip') 
    .offset([-10, 0]) 
    .html(function(d) { 
     return "<span class='tooltip-line'>One: " + d.patients + "</span><span>Two: " + d.patients + "</span>"; 
    }); 

    //create svg container 
    var svg = d3.select('body') 
    .append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");   

    // tooltip 
    svg.call(tip); 

    // Horizontal grid 
    svg.append("g")   
    .attr("class", "grid horizontal") 
    .call(d3.svg.axis().scale(yScale) 
      .orient("left") 
      .tickSize(-(height + margin.top + margin.bottom - 70), 0, 0) 
      .tickFormat("") 
     ); 

    //create bars 
    svg.selectAll(".bar") 
    .data(data) 
    .enter() 
    .append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return xScale(d.month); }) 
    .attr("width", xScale.rangeBand()) 
    .attr("y", function(d) { return yScale(d.patients); }) 
    .attr("height", function(d) { return height - yScale(d.patients); }) 
    .on("click", function(d) { 
     // add text on top of bar 
     d3.select(this).append("text") 
      .attr("x", xScale.rangeBand()/2) 
      .attr("y", function(d) { return yScale(d.patients) + 5 ; }) 
      .attr("dy", "1em") 
      .attr("text-anchor", "middle") 
      .attr("font-size", "14px") 
      .attr("fill", "orange") 
      .attr("transform", function(d) { return "translate(0, -20)"; }) 
      .text(function(d) { return d.patients; }); 
    }) 
    .on('mouseover', tip.show) 
    .on('mouseout', tip.hide) 


    //drawing the x axis on svg 
    svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

    //drawing the y axis on svg 
    svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end"); 

    svg.selectAll(".tick") 
    .filter(function (d) { return d === 0;  
    }).remove(); 

JSFiddle

Answer 1

あなたが "RECT" 要素内の "テキスト" 要素を追加します。すなわち<rect><text></text></rect>。あなたが望むのはもっと見た目のあるsvgです<rect></rect><text></text>

Answer 2

'rect'要素に 'text'要素を追加できないので、 'g'要素に各バーをラップして修正しました。不透明度が0の各バーにテキストを追加し、次にクリックハンドラで「nextSibling」（不可視のテキスト要素）を選択し、適切な不透明度を設定します。これと同じように：

//create bars 
var bars = svg.selectAll(".bar") 
.data(data) 
.enter() 
.append("g"); 

bars.append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return xScale(d.month); }) 
    .attr("width", xScale.rangeBand()) 
    .attr("y", function(d) { return yScale(d.patients); }) 
    .attr("height", function(d) { return height - yScale(d.patients); }) 
    .on("click", function(d) { 
    var txt = d3.select(this.nextSibling); 

    if(txt.attr('opacity') === '0') { 
     txt.attr('opacity', '1'); 
    } else { 
     txt.attr('opacity', '0'); 
    } 

    }); 

bars.append("text") 
    .attr("x", function(d) { return xScale(d.month); }) 
    .attr("y", function(d) { return yScale(d.patients) + 2 ; }) 
    .attr("dy", "1em") 
    .attr("text-anchor", "middle") 
    .attr("font-size", "16px") 
    .attr("fill", "orange") 
    .attr("opacity", '0') 
    .attr("transform", function(d) { return "translate(20, -20)"; }) 
    .text(function(d) { return d.patients; }); 

And here's the fiddle!