在散点图工具提示上显示正确的X坐标值

时间：2018-02-15 10:27:44

标签： d3.js svg scatter-plot

在我的散点图中，我正在徘徊在点上，以生成工具提示。但是，我的X坐标值不正确，对应于图轴。可以为同样的线索提供线索吗？ 有一点需要注意 - 我有2个数据集阵列 - 1对应Y值，另一个对应Y-Error值。

＆＃13;
＆＃13; 
var width = 700;
var height = 700;
var padding = 90;
var myData = [12, 18, 20, 9, 17, 25, 30];
var errData = [6, 9, 10, 4.5, 8.5, 12.5, 15];
var svg = d3.select("body").
append("svg")
  .attr("width", width)
  .attr("height", height);

var Mydiv = d3.select("body")
  .append("div")
  //.append("span")
  //.text('X')
  .data(myData)
  .attr("class", "toolDiv")
  //.attr("span", "close")
  .style("opacity", "0");

var MyLine = d3.select("body")
  .append("div")
  .data(myData)
  .attr("class", "error-line");
//.style("opacity", 1);

//var m1 = d3.max(myData + errData)
var yScale = d3.scaleLinear().domain([0, d3.max(myData)]).range([height / 2, 50]);
var xScale = d3.scaleLinear().domain([0, d3.max(myData)]).range([0, width - 100]);
var y_ErScale = d3.scaleLinear().domain([0, d3.max(errData)]).range([height / 2, 50]);
var x_ErScale = d3.scaleLinear().domain([0, d3.max(errData)]).range([0, width - 100]);

var valueline = d3.selectAll("scatter-dots")
  .append("line")
  .attr("x", function(d, i) {
    return xScale(myData[i]);
  })
  .attr("y", function(d) {
    return yScale(d);
  });

//.curve();


svg.append("g")
  .selectAll("scatter-dots")
  .data(myData)
  .enter()
  .append("line")
  .data(myData)
  .attr("class", "line")
  .attr("d", valueline);

// .style("opacity", 0);


var eBar = d3.select("body").append("svg");
//var x_min = 
var x_axis = d3.axisBottom()
  .scale(xScale);

var y_axis = d3.axisLeft()
  .scale(yScale);

svg.append("g")
  .attr("transform", "translate(50, 10)")
  .call(y_axis);

var xAxisTranslate = height / 2 + 10;

svg.append("g")
  .attr("transform", "translate(50, " + xAxisTranslate + ")")
  .call(x_axis);

svg.append("text")
  .attr("transform",
    "translate(" + (width / 1.2) + " ," + (height - 280) + ")")
  .style("text-anchor", "middle")
  .style("left", "70px")
  .text("Points");

svg.append("text")
  .attr("transform",
    "translate(" + (width / 2) + " ," + (height - 280) + ")")
  .style("text-anchor", "middle")
  .style("left", "70px")
  .text("X-Axis");

svg.append("text")
  .attr("transform",
    "translate(" + (height / 40) + " ," + (width - 500) + ")rotate(-90)")
  .style("text-anchor", "middle")
  .style("left", "70px")
  .text("Y-Axis");

// svg.append("text")             
//   .attr("transform",
//         "translate(" + (height/10) + " ," + (width - 690) + ")rotate(-90)")
//   	.style("text-anchor", "middle")
//   	.style("left", "70px")
//   	.text("Y");



svg.append("g")
  .selectAll("scatter-dots")
  .data(myData)

  .enter().append("svg:circle")
  .attr("cx", function(d, i) {
    return xScale(myData[i]);
  })
  .attr("cy", function(d) {
    return yScale(d);
  })
  .attr("r", 3)
  .style("opacity", 0.8)
  .style("cursor", "help")
  //  .on("click", function(d, i){

  //  	var active = Mydiv.active ? false : true ,
  //  	newOpacity = active ? 0 : 0.9;
  //  	Mydiv.transition()	
  // .duration(200)
  // .style("opacity", newOpacity);
  //  Mydiv.html("X" + "-" + errData[i] + "<br/>" + "Y" + "-" + myData[i] )
  // .style("left", (d3.event.pageX + 10) + "px")
  // .style("top", (d3.event.pageY - 18) + "px");
  // Mydiv.active = active;
  //  });
  .on("mouseover", function(d, i) {
    //console.log(this);
    //console.log(d3.select(this));
    //d3.select(this);
    //console.log(d3.select(this));
    Mydiv.transition()
      .duration(200)
      .style("opacity", 0.9);
    Mydiv.html("X" + "-" + errData[i] + "<br/>" + "Y" + "-" + myData[i])
      .style("left", (d3.event.pageX) + "px")
      .style("top", (d3.event.pageY - 28) + "px");
    //div.html(yScale(d));
  })
  .on("mouseout", function(d) {
    Mydiv.transition()
      .duration(500)
      .style("opacity", 0);
  });

// var errorBar = eBar.append("path")
//   .attr("d", yScale(errData))
//   .attr("stroke", "red")
//   .attr("stroke-width", 1.5);
//   svg.append("g")
// .selectAll("error-bars")
//   .data(errData)  
//   .enter().append("svg:path")
//   .attr("cx", function (d,i) { return x_ErScale(errData[i]); } ) 
//       .attr("cy", function (d) { return y_ErScale(d); } ) 
//  .attr("stroke", "red")
// .attr("stroke-width", 1.5);

svg.append("g")
  .selectAll("line")
  .data(errData)
  .enter()
  .append("line")
  .attr("class", "error-line")
  .attr("x1", function(d) {
    return x_ErScale(d);
  })
  .attr("y1", function(d) {
    return y_ErScale(d) + 30;
  })
  .attr("x2", function(d) {
    return x_ErScale(d);
  })
  .attr("y2", function(d) {
    return y_ErScale(d) + 2;
  })
  .on("mouseover", function(d) {

    MyLine.transition()
      //.duration(200)
      .style("opacity", "1");
    //.style("fill-opacity", 0);
  })
  .on("mouseout", function(d) {

    MyLine.transition()
      //.duration(200)
      .style("opacity", 0.0);
    //.style("fill-opacity", 1);
  });


svg.append("g").selectAll("line")
  .data(errData).enter()
  .append("line")
  .attr("class", "error-cap")
  .attr("x1", function(d) {
    return x_ErScale(d) - 8;
  })
  .attr("y1", function(d) {
    return y_ErScale(d) - 30;
  })
  .attr("x2", function(d) {
    return x_ErScale(d) + 8;
  })
  .attr("y2", function(d) {
    return y_ErScale(d) - 30;
  });

svg.append("g")
  .selectAll("line")
  .data(errData)
  .enter()
  .append("line")
  .attr("class", "error-line")
  .attr("x1", function(d) {
    return x_ErScale(d);
  })
  .attr("y1", function(d) {
    return y_ErScale(d) - 30;
  })
  .attr("x2", function(d) {
    return x_ErScale(d);
  })
  .attr("y2", function(d) {
    return y_ErScale(d) - 2;
  })
  .on("mouseover", function(d) {

    MyLine.transition()
      //.duration(200)
      .style("opacity", "1");
    //.style("fill-opacity", 0);
  })
  .on("mouseout", function(d) {

    MyLine.transition()
      //.duration(200)
      .style("opacity", "0.6");
    //.style("fill-opacity", 1);
  });
// .on("mouseover", function(d){

//   MyLine.transition()
// 	.duration(200)
// 	.style("opacity", 0);
// })
// .on("mouseout", function(d){

// 	MyLine.transition()
// 	.duration(200)
// 	.style("opacity", 1);
// });

// Add Error Bottom Cap
svg.append("g").selectAll("line")
  .data(errData).enter()
  .append("line")
  .attr("class", "error-cap")
  .attr("x1", function(d) {
    return x_ErScale(d) - 8;
  })
  .attr("y1", function(d) {
    return y_ErScale(d) + 30;
  })
  .attr("x2", function(d) {
    return x_ErScale(d) + 8;
  })
  .attr("y2", function(d) {
    return y_ErScale(d) + 30;
  });



//svg.selectAll("scatter-dots")
//  .data(myData)  
//  .enter()
//  .on("mouseover", function()
//  {
//  	//console.log(this);
//    //console.log(d3.select(this));
//    //d3.select(this);
//    //console.log(d3.select(this));
//    //div.transition()	
//  	//.duration(200)
//    //.style("opacity", 0.8);
//    //div.html(myData);
//  });
////  .on("mouseout", function(d)
////  {
////    div.transition()	
////  	.duration(500)
////  	.style("opacity", 0);
////  });
＆＃13; 
/*body {
	font: 10px sans-serif;
}
*/

#d1 {
  position: relative;
  top: 100px;
}

#svg1 {
  position: relative;
  bottom: 80px;
}

.axis_path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis_line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
  cursor: pointer;
}

.error-line {
  stroke: #b30059;
  stroke-width: 2px;
  opacity: 0.6;
  stroke-dasharray: 2;
  /*fill-opacity: 1;*/
  /*opacity: 1;*/
}

.error-cap {
  stroke: #b30059;
  stroke-width: 2px;
  stroke-type: solid;
}

.toolDiv {
  position: absolute;
  text-align: center;
  width: 120px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}


/*.toolDiv.image
{
	position: static;
	content: url(http://wfarm1.dataknet.com/static/resources/icons/set28/7f8535d7.png);
}*/


/*.close {
    width: 10px;
    height: 10px;
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    background: url('http://i.imgur.com/Idy9R0n.png') no-repeat 0 0;
    cursor: pointer;
}
.close:hover {
    background-position: -13px 0;
}*/

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}
＆＃13; 
<head>
  <title>Scatter Plot Example</title>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <!-- <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> -->
  <link rel="stylesheet" type="text/css" href="scatter.css">
</head>

<body>
  <script src="scatterplot.js" type="text/javascript"></script>
  <div id="d1">
    <svg id="svg1">
	<div id="d2"></div>
</svg>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

我已经提供了一个小提琴供参考。

0 个答案:

没有答案
相关问题
最新问题