Подсказки для нескольких графиков линий в D3

Question

Я новичок в D3, и мое требование - получить несколько графиков линий и предоставить всплывающие подсказки для них.

Я мог бы получить несколько графиков линий, чтобы отображаться, но я ошибаюсь в получении нескольких подсказок.

Я новичок в javascript. Так что любая помощь будет высоко оценена.

Вот мой код.

<script> 

function showData(obj, d) { 
var coord = d3.mouse(obj); 
var infobox = d3.select(".infobox"); 
// now we just position the infobox roughly where our mouse is 
infobox.style("left", (coord[0] + 200) + "px"); 
infobox.style("top", (coord[1] - 130) + "px"); 
$(".infobox").html(d); 
$(".infobox").show(); 
} 

function hideData() { 
$(".infobox").hide(); 
} 

    var xx,yy; 
    function xx(e) { 
    return x(e.date); }; 
    function yy(e) { 
    return y(e.returns); }; 

var draw = function() { 

     var margin = {top:100,left:200,right:200,bottom:100}, 
     width = 1150 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 


     var parseDate = d3.time.format("%Y-%m-%d").parse; 

     x = d3.time.scale().range([0,width]); 

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

     //values of the axis is plotted here 
     var xAxis = d3.svg.axis().scale(x).orient("bottom"); 

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

     var svg = d3.select("#chart").append("svg") 
        .attr("width" , width + margin.left + margin.right) 
        .attr("height" , height + margin.top + margin.bottom) 
        .attr("pointer-events" , "all") 
       .append("g") 
        //this is the line that positions the graph 
       .attr("transform" , "translate(" + margin.left + "," + margin.top +") ");  

     var activeReturns = new Array(); 
     var passiveReturns = new Array(); 
     var D3Obj = new Array(); 

     var line = d3.svg.line() 
       .interpolate("basis") 
       .x(function(d) { return x(d.date); }) 
       .y(function(d) { return y(d.returns);}); 

     d3.json("d3.v3/sample1.json",function(error,result) { 
     result.data.forEach(function(d){ 

      var arObj = new Object(); 
      arObj.date = parseDate(d.date); 
      arObj.returns = +d.returns; 

      var prObj = new Object(); 
      prObj.date = parseDate(d.date); 
      prObj.returns = +d.ticker_performance; 

      activeReturns.push(arObj); 
      passiveReturns.push(prObj); 

     }); 

     D3Obj.push(activeReturns); 
     D3Obj.push(passiveReturns); 


     // this is where i tell that the line graph to be done 


    x.domain(d3.extent(D3Obj[0], function(d) {return d.date ;})); 
    y.domain(d3.extent(D3Obj[0], function(d) {return d.returns ;})); 

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


    svg.append("g") 
     .attr("class" , "y axis") 
     //this is where yaxis line is added 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Price ($)"); 

    svg.selectAll(".line") 
    .data(D3Obj) 
    .enter().append("path") 
    .attr("class","line") 
    .attr("d",line) 

//this is where i am adding the tooltips 
//tooltip for 1st line 
svg.selectAll("circle") 
.data(D3Obj[0]) 
.enter().append("circle") 
.attr("fill", "red") 
.attr("r", 2) 
    .attr("cx", xx) 
.attr("cy", yy) 
.on("mouseover", function(d) { showData(this, d.returns);}) 
.on("mouseout", function(){ hideData();}); 

//tooltip for 2nd line - this is where i think i am going wrong. 
svg.selectAll("circle") 
.data(D3Obj[1]) 
.enter().append("circle") 
.attr("fill", "steelblue") 
.attr("r", 2) 
    .attr("cx", xx) 
.attr("cy", yy) 
.on("mouseover", function(d) { showData(this, d.returns);}) 
.on("mouseout", function(){ hideData();}); 


}); 

$("#chart").append("<div class='infobox' style='display:none;'>Test</div>"); 

}; 
</script> 

Answer 1

Когда вы создаете вторую точку, ничего не происходит. Функция .data() попытается сопоставить элементы данных, которые вы передаете, с тем, что вы выбрали (в данном случае одним кругом), и преуспеет здесь. Это означает, что ваш выбор ввода пуст и ничего не происходит.

Д3 путь пройти в все данные, которые вы хотите использовать для создания элементов одновременно и обрабатывать соответствующим образом в функции для установки атрибутов и т.д. То есть, ваш код должен выглядеть примерно так

svg.selectAll("circle") 
    .data(D3Obj) 
    .enter().append("circle") 
    .attr("fill", function(d, i) { if(i == 0) { return "red"; } else { return "steelblue"; } }) 
    .attr("r", 2) 
    .attr("cx", xx) 
    .attr("cy", yy) 
    .on("mouseover", function(d) { showData(this, d.returns);}) 
    .on("mouseout", function(){ hideData();}); 

Это создаст два круга и прикрепит к ним соответствующих слушателей.