Question

任务 - 我

我有一个折线图，其中鼠标悬停时检索到的图表上的值不正确，因为我使用了错误的逻辑。帮助我通过鼠标悬停在图表上的点上显示值。

任务-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>

date，referral，payment，New，New1，New3，New4

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

如何检索鼠标悬停在折线图上的数据 - D3.js

0 个答案: