d3の2つのデータソースに関するツールチップの問題

Question

私はphpによって生成されたいくつかのjsonから生成されたd3チャートを持っています。そのすべてがうまくいきます - phpはjsonを正しくフォーマットし、グラフは適切に表示されます。 hereを見ることができる、と私は以下のjavascriptの部分のための完全なコードを含むてる：

  var margin = {top: 50, right: 150, bottom: 50, left: 150}, 
      w = 2500 - margin.left - margin.right, 
      h = 500 - margin.top - margin.bottom; 


var json = <?php echo $json; ?>; 

console.log(json); 

d3.json("MM_chart.json", function(error, json) { 
    if (error) throw error; 

      var items = json.items; 

      var locations = json.locations; 

      var directions = json.stage_directions; 

      console.log(items); 
      console.log(locations); 
      console.log(directions); 

      var stage_directions = ([44, 49, 114, 140, 209, 217, 249, 257, 265, 277, 305, 334, 358, 381, 398, 409, 440, 470, 491, 547, 555, 564, 572, 587, 614, 630, 640, 691, 704, 725, 743, 775, 793, 818, 823, 841, 845, 868, 872, 888, 902, 910, 920, 925, 963, 993, 1005, 1023, 1031, 1047, 1061, 1096, 1125, 1133, 1143, 1178, 1210, 1228, 1281, 1293, 1336, 1349, 1376, 1395, 1439, 1446, 1454, 1538, 1554, 1562, 1578, 1598, 1610, 1618, 1642, 1646, 1716, 1725, 1743, 1781, 1791, 1797, 1843, 1863, 1887, 1915, 1923, 1939 ,1972, 1989, 2019, 2031, 2039, 2045, 2073, 2085, 2101, 2123]); 

      var x = d3.scale.linear() 
      .domain([0, 2200]) 
      .range([0, w]); 

      var y = d3.scale.ordinal() 
      .domain(locations.map(function(d) {return d["location"];})) 
      .rangeBands([0, h]); 

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

      var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom"); 

      var tip = d3.tip() 
      .attr('class', 'd3-tip') 
      .offset([-10, 0]) 
      .html(function(d, i) {return console.log(d.line_text) + "<strong>(" + d.starting_line + ")</strong> <i>" + d.character + "</i>: " + d.line_text;}); 

      var stage_tip = d3.tip() 
      .attr('class', 'd3-tip') 
      .offset([-10, 0]) 
      .html(function(d, i) {return console.log(d.direction_text) + "<strong>(" + d.line_after + ") s.d.</strong> <i>" + d.direction_text;}); 

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


      svg.append("text") 
      .attr("transform", "translate(" + (w/2) + " ," + (h + margin.bottom - 5) +")") 
      .style("text-anchor", "middle") 
      .text("Line Number"); 

      var stage_bars = svg.selectAll(".stage_bar") 
       .data(directions) 
       .enter() 
       .append("rect") 
       .attr("class", "overlay") 
       .attr("class", function(d, i) {return "stage_bar " + d.direction_text;}) 
       .attr("x", function(d, i) {return d.line_after;}) 
       .attr("width", 1) 
       .attr("height", h) 
       .style("fill", "black") 
       .style("opacity",0.3) 
       .call(stage_tip) 
       .on('mouseover', stage_tip.show) 
       .on('mouseout',stage_tip.hide); 

      svg.append("rect") 
      .attr("class", "overlay") 
      .attr("x",1) 
      .attr("width", 1133) 
      .attr("height", h) 
      .style ("fill", "red") 
      .style ("opacity", 0.1); 

      svg.append("rect") 
      .attr("class", "overlay") 
      .attr("x",1133) 
      .attr("width", 857) 
      .attr("height", h) 
      .style ("fill", "yellow") 
      .style ("opacity", 0.1); 

      svg.append("rect") 
      .attr("class", "overlay") 
      .attr("x",1990) 
      .attr("width", 134) 
      .attr("height", h) 
      .style ("fill", "green") 
      .style ("opacity", 0.1); 

      svg.append("rect") 
      .attr("class", "overlay") 
      .attr("x",5) 
      .attr("y", 10) 
      .attr("width", 485) 
      .attr("height", 155) 
      .style ("fill", "aliceblue") 
//    .style ("opacity", 0.1); 

      svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + h + ")") 
      .call(xAxis); 

      svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
      //.call(bars); 

      var bars = svg.selectAll(".bar") 
      .data(items) 
      .enter() 
      .append("rect") 
      .attr("class", function(d, i) {return "bar " + d.character;}) 
      .attr("x", function(d, i) {return d.starting_line;}) 
      .attr("y", function(d, i) {return y(d.location);}) 
      .attr("width", function(d, i) {return d.duration;}) 
      .attr("height", 15) 
      .style("fill", function(d,i) {return "#" + d.color;}) 
      .call(tip) 
      .on('mouseover', tip.show) 
      .on('mouseout', tip.hide); 


        var listCharacters = d3.set(items.map(function(d) {return d.character})).values(); 

        listColors = []; 

        listPositions = []; 

        for (l = 0; l < listCharacters.length; l++) { 
         for (var key in items) { 
          if (listCharacters[l] === items[key].character) { 
           if (listColors.indexOf(items[key].color) > -1) {} else { 
            listColors.push(items[key].color); 
            var xlegend = (Math.floor(l/10) * 100); 
            var ycounter; 
            var ylegend; 
            var oldxlegend; 

            if (l === 0) { 
             ycounter = 1; 
            } 

            if (ycounter < 10) { 
             listPositions.push(ycounter * 15); 
             ycounter++; 
            } else { 
             listPositions.push(ycounter * 15); 
             ycounter = 1; 
            } 

           } 
          } else {} 
         } 
        } 


console.log(listCharacters); 
console.log(listColors); 
console.log(listPositions); 

      var legend = svg.selectAll(".legend") 
      .data(listCharacters) 
      .enter().append("g") 
      .attr("class", "legend") 
      .attr("transform", function(d, i) { return "translate(" + (Math.floor(i/10) * 105) + ", " + listPositions[i] + ")"; }) 

      legend.append("rect") 
      .attr("x", 10) 
      .attr("width", 10) 
      .attr("height", 10) 
      .attr("fill", function(d,i) {return "#" + listColors[i];}); 



      legend.append("text") 
      .attr("x", 22) 
      .attr("y", 5) 
      .attr("dy", ".35em") 
      .text(function(d,i){ return listCharacters[i]}); 

      svg.append("g") 
      .attr("class", "legend") 
      .call(legend) 

     }); 

私の問題は、私はJSONの二つの別々のサブセクションから描く私は含めたい2つのツールチップを、持っているということです。

var stage_bars = svg.selectAll(".stage_bar") 
     .data(directions) 
     .enter() 
     .append("rect") 
     .attr("class", "overlay") 
     .attr("class", function(d, i) {return "stage_bar " + d.direction_text;}) 
     .attr("x", function(d, i) {return d.line_after;}) 
     .attr("width", 1) 
     .attr("height", h) 
     .style("fill", "black") 
     .style("opacity",0.3) 
     .call(stage_tip) 
     .on('mouseover', stage_tip.show) 
     .on('mouseout',stage_tip.hide); 

    var bars = svg.selectAll(".bar") 
     .data(items) 
     .enter() 
     .append("rect") 
     .attr("class", function(d, i) {return "bar " + d.character;}) 
     .attr("x", function(d, i) {return d.starting_line;}) 
     .attr("y", function(d, i) {return y(d.location);}) 
     .attr("width", function(d, i) {return d.duration;}) 
     .attr("height", 15) 
     .style("fill", function(d,i) {return "#" + d.color;}) 
     .call(tip) 
     .on('mouseover', tip.show) 
     .on('mouseout', tip.hide); 

私の問題はバーのツールチップが（ものということです：項目と方向のための棒のための2つのコール内

  var tip = d3.tip() 
      .attr('class', 'd3-tip') 
      .offset([-10, 0]) 
      .html(function(d, i) {return console.log(d.line_text) + "<strong>(" + d.starting_line + ")</strong> <i>" + d.character + "</i>: " + d.line_text;}); 

      var stage_tip = d3.tip() 
      .attr('class', 'd3-tip') 
      .offset([-10, 0]) 
      .html(function(d, i) {return console.log(d.direction_text) + "<strong>(" + d.line_after + ") s.d.</strong> <i>" + d.direction_text;}); 

と宣言：ツールチップは、次の2つのvar宣言によって定義されていますそのコールチップ）は機能しますが、stage_bars（ステージチップと呼ばれるもの）のツールチップでは表示されません。問題はtipとstage_tipの両方で同じクラスを呼び出すことですが、tip以外のものとして宣言すると違いはありません。

私の質問は、両方のツールチップを機能させる方法です。これも可能ですか？私はそれを行うように見える例を見たが、コードは明確ではない。

Answer 1

解決策は実際にはとても簡単でした。ステージの方向を示す行が他のオブジェクトの下にあることを意味するsvg.append（ "rect"）ステートメントの前に宣言されたstage_bars変数がありました。そのため、マウスはツールチップを起動することができませんでした。これらのsvg.appendステートメントの後に、var宣言をスポットに移動すると、問題が解決されました。