Блог

Главная - Вопросы по программированию - Как получить данные при наведении курсора мыши на линейный график — D3.js

Как получить данные при наведении курсора мыши на линейный график — D3.js

#javascript #d3.js #linechart

#javascript #d3.js #линейный график

Вопрос:

введите описание изображения здесь Задача — I

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

Задача -II

Было бы любезно, если бы кто-нибудь помог мне оптимизировать код, и расширяющиеся столбцы могли автоматически создавать больше строк на графике

Ценю вашу поддержку 

 <!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}

path { 
   /* stroke: steelblue;*/
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 12px;
  padding: 8px;
  margin-top: -20px;
  font: 10px sans-serif;
  background: #ddd;
  pointer-events: none;
}
/* basic positioning */
.legend { list-style: none; }
.legend li { float: left; margin-right: 10px; }
.legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px;}
/* your colors */
.legend .Referral { background-color: #FF7F0E; }
.legend .Payment { background-color: #1f77b4; }

</style>
<body>
<!-- load the d3.js library -->    
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 100},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%m/%e/%Y").parse; //

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 10]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom")   
     .ticks(d3.time.months)
    .tickSize(16, 0)
    .tickFormat(d3.time.format("%b%y"));


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

// Define the line
var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })   
    .y(function(d) { return y(d.referral); });

var valueline2 = d3.svg.line()
    .x(function(d) { return x(d.date); })   
    .y(function(d) { return y(d.payment); });

// Adds the svg canvas
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   ")");


// Get the data
d3.csv("misadhocdata.csv", function(error, data) {



  data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.referral =  d.referral;
        d.payment =  d.payment;

    });


    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return Math.max(d.referral, d.payment); })]);


    // Add the valueline path.
    svg.append("path")          //Referral Orange
        .attr("class", "line")
        .attr('stroke', '#FF7F0E')
        .on("mouseover", mouseover)
        .on("mousemove", mousemove)
        .on("mouseout", mouseout)       
        .attr("d", valueline(data))  ;

        // Add the scatterplot Referral
    svg.selectAll("dot")
        .data(data)
      .enter().append("circle")
        .attr("r", 3.5)
        .attr("cx", function(d) { return x(d.date); })
        .attr("cy", function(d) { return y(d.referral); })
        .style("fill",'#FF7F0E')
        .on("mouseover", mouseover)
        .on("mousemove", mousemove)
        .on("mouseout", mouseout); 



  // Add the valueline2 path.
    svg.append("path")        //Payment Blue
        .attr("class", "line")
        .attr('stroke', '#1f77b4')
        .attr('stroke-width', 2)
        .attr("d", valueline2(data))
        .on("mouseover", mouseover)
        .on("mousemove", mousemove)
        .on("mouseout", mouseout);


        // Add the scatterplot Payments
    svg.selectAll("dot")
        .data(data)
      .enter().append("circle")
        .attr("r", 3.5)
        .attr("cx", function(d) { return x(d.date); })
        .attr("cy", function(d) { return y(d.payment); })
        .style("fill",'#1f77b4')
        .on("mouseover", mouseover)
        .on("mousemove", mousemove)
        .on("mouseout", mouseout)
        ; 


    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0,"   height   ")")
        .call(xAxis);



    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);





var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("display", "none");

function mouseover() {
  div.style("display", "inline");
}

var max=d3.max(data, function(d) { return Math.max(d.referral, d.payment); });

function mousemove() {
        //Math.round(((max/210)*(210-d3.event.pageY)))
      div.text(function(d,i){return Math.round(((max/200)*(247-d3.event.pageY)))})
      .style("left", (d3.event.pageX - 34)   "px")
      .style("top", (d3.event.pageY - 12)   "px");
}


function mouseout() {
  div.style("display", "none");
}


});

</script>

<div id="Cpt">
<ul class="legend">
    <li><span class="Referral"></span> Referral</li>
    <li><span class="Payment"></span> Payment</li>
</ul>
</div>


</body>

дата, направление, оплата, Новый, Новый1, Новый3, Новый4

12/1/2015 , 20 , 43 , 62 , 70 , 77 , 82

1/1/2016 , 21 , 48 , 61 , 69 , 75 , 81

2/1/2016 , 26 , 51 , 64 , 71 , 78 , 83

3/1/2016 , 28 , 52 , 64 , 73 , 77 , 83

4/1/2016 , 22 , 49 , 63 , 69 , 73 , 0

5/1/2016 , 26 , 53 , 65 , 70 , 0 , 0

6/1/2016 , 16 , 41 , 56 , 0 , 0 , 0

7/1/2016 , 27 , 48 , 0 , 0 , 0 , 0

8/1/2016 , 18 , 0 , 0 , 0 , 0 , 0

Комментарии:

1. bl.ocks.org/WilliamQLiu/76ae20060e19bf42d774

2. @BuildingJarl Спасибо, я могу получить значения по точкам, я могу обнаружить, что мой код не оптимизирован. Я имею в виду для каждой строки графика (рефералов и платежей). Я снова и снова пишу все функциональные возможности. Есть ли способ, потому что будущая область видимости составляет 5 строк?