d3 v4に添付テキストが表示されない

Question

をd3 v4の新しいバージョンに「翻訳」しようとしています。私は（さらに、誰もがD3のV4で動作するようにしようとしている場合は良い例であり、新たな機能の問題を持っている）、このJavaScriptでの作業例を持っている：

var margin = {top: 30, right: 10, bottom: 10, left: 10}, 
    width = 600 - margin.left - margin.right, 
    height = 200 - margin.top - margin.bottom; 

var x = d3.scaleBand().rangeRound([0, width]).padding(1), 
    y = {}, 
    dragging = {}; 


var line = d3.line(), 
    //axis = d3.axisLeft(x), 
    background, 
    foreground, 
    extents; 

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 + ")"); 

d3.csv("cars.csv", function(error, cars) { 
    // Extract the list of dimensions and create a scale for each. 
    //cars[0] contains the header elements, then for all elements in the header 
    //different than "name" it creates and y axis in a dictionary by variable name 
    x.domain(dimensions = d3.keys(cars[0]).filter(function(d) { 
    if(d == "name") { 
     return false; 
    } 
    return y[d] = d3.scaleLinear() 
     .domain(d3.extent(cars, function(p) { 
      return +p[d]; })) 
     .range([height, 0]); 
    })); 

    extents = dimensions.map(function(p) { return [0,0]; }); 

    // Add grey background lines for context. 
    background = svg.append("g") 
     .attr("class", "background") 
    .selectAll("path") 
     .data(cars) 
    .enter().append("path") 
     .attr("d", path); 

    // Add blue foreground lines for focus. 
    foreground = svg.append("g") 
     .attr("class", "foreground") 
    .selectAll("path") 
     .data(cars) 
    .enter().append("path") 
     .attr("d", path); 

    // Add a group element for each dimension. 
    var g = svg.selectAll(".dimension") 
     .data(dimensions) 
    .enter().append("g") 
     .attr("class", "dimension") 
     .attr("transform", function(d) { return "translate(" + x(d) + ")"; }) 
     .call(d3.drag() 
     .subject(function(d) { return {x: x(d)}; }) 
     .on("start", function(d) { 
      dragging[d] = x(d); 
      background.attr("visibility", "hidden"); 
     }) 
     .on("drag", function(d) { 
      dragging[d] = Math.min(width, Math.max(0, d3.event.x)); 
      foreground.attr("d", path); 
      dimensions.sort(function(a, b) { return position(a) - position(b); }); 
      x.domain(dimensions); 
      g.attr("transform", function(d) { return "translate(" + position(d) + ")"; }) 
     }) 
     .on("end", function(d) { 
      delete dragging[d]; 
      transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")"); 
      transition(foreground).attr("d", path); 
      background 
       .attr("d", path) 
      .transition() 
       .delay(500) 
       .duration(0) 
       .attr("visibility", null); 
     })); 
    // Add an axis and title. 
    g.append("g") 
     .attr("class", "axis") 
     .each(function(d) { d3.select(this).call(d3.axisLeft(y[d]));}) 
     //text does not show up because previous line breaks somehow 
    .append("text") 
     .style("text-anchor", "middle") 
     .attr("y", -9) 
     .text(function(d) { return d; }); 

    // Add and store a brush for each axis. 
    g.append("g") 
     .attr("class", "brush") 
     .each(function(d) { 
     d3.select(this).call(y[d].brush = d3.brushY().extent([[-8, 0], [8,height]]).on("brush start", brushstart).on("brush", brush_parallel_chart)); 
     }) 
    .selectAll("rect") 
     .attr("x", -8) 
     .attr("width", 16); 
}); 

function position(d) { 
    var v = dragging[d]; 
    return v == null ? x(d) : v; 
} 

function transition(g) { 
    return g.transition().duration(500); 
} 

// Returns the path for a given data point. 
function path(d) { 
    return line(dimensions.map(function(p) { return [position(p), y[p](d[p])]; })); 
} 

function brushstart() { 
    d3.event.sourceEvent.stopPropagation(); 
} 


// Handles a brush event, toggling the display of foreground lines. 
function brush_parallel_chart() {  
    for(var i=0;i<dimensions.length;++i){ 
     if(d3.event.target==y[dimensions[i]].brush) { 
      extents[i]=d3.event.selection.map(y[dimensions[i]].invert,y[dimensions[i]]); 

     } 
    } 

     foreground.style("display", function(d) { 
     return dimensions.every(function(p, i) { 
      if(extents[i][0]==0 && extents[i][0]==0) { 
       return true; 
      } 
      return extents[i][1] <= d[p] && d[p] <= extents[i][0]; 
     }) ? null : "none"; 
     }); 
} 

すべてが正常に動作する（のそれぞれにブラッシングAxesの順番を変えます）。ただし、テキストタグが追加され、テキストがタグに書き込まれていても、各軸の上にあるラベルは表示されません（ブラウザを使用してHTMLを生成します）。私は、この責任のコードはこの部分であると信じていますが、私はこの問題が発生する理由を見つけることができない午前：

g.append("g") 
     .attr("class", "axis") 
     .each(function(d) { d3.select(this).call(d3.axisLeft(y[d]));}) 
     //text does not show up because previous line breaks somehow 
    .append("text") 
     .style("text-anchor", "middle") 
     .attr("y", -9) 
     .text(function(d) { return d; }); 

はなぜテキストラベルは表示されませんか？

Answer 1

D3 v4では、軸コンポーネントは明示的にフィルの選択をnoneに設定します。

<text>要素が継承されます：source codeから：V3によって生成されたコードとは対照的に

：

selection.filter(entering) 
    .attr("fill", "none")  // <=== Fill set to none by D3 
    .attr("font-size", 10) 
    .attr("font-family", "sans-serif") 
    .attr("text-anchor", orient === right ? "start" : orient === left ? "end" : "middle"); 

これは、次のコードを作成します。これらのプロパティは、これらのグループの子であるため、wh erebyはテキストを隠している。

demo作業

.axis text { 
    fill:black; /* <== Set the fill */ 
    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; 
    cursor: move; 
} 

：CSS経由

1. を行うことができますが、明示的にそれらのスタイルを必要とするラベルを表示するには

   。 demo作業

   .append("text") 
       .attr("fill", "black")   // <=== Set the fill 
   // .style("fill", "black")  // Will also work when using .style() 
       .style("text-anchor", "middle") 
       .attr("y", -9) 
       .text(function(d) { return d; }); 
   

   ：<text>要素自体にfill属性を設定することで

2. 。