相关疑难解决方法(0)

如何确定两条线是否相交,如果它们相交,在x,y点处是什么？

我是D3的新手,正在尝试制作一个简单的交互式线图.我目前的代码:http://jsfiddle.net/9xske0m1/ 基于bl.ocks.org上的一个代码

我正在考虑添加一条垂直线,如下所示:http://bl.ocks.org/benjchristensen/2657838但是在悬停时显示为图例的线条的值,而不是将它们显示在图表的底部,当我将鼠标悬停在一条线上时.所以我想知道我会怎么做.我假设我在这里添加了一些东西:

    data = data.map( function (d) { 
    return { 
      CAUSES: d.CAUSES,
      YEAR: parseDate(d.YEAR.toString()),
      VALUE: +d.VALUE }; 
});   


// then we need to nest the data on CAUSES since we want to only draw one
// line per CAUSES
  data = d3.nest().key(function(d) { return d.CAUSES; }).entries(data);


  x.domain([d3.min(data, function(d) { return d3.min(d.values, function (d) { return d.YEAR; }); }),
             d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.YEAR; }); })]);
  y.domain([0, d3.max(data, …

我已经按照此处的答案在多系列折线图上创建了工具提示。如果我将鼠标悬停在最后一个日期上，如您在此图片中所见：

工具提示重叠。我想要的是当工具提示重叠时，将它们中的任何一个移动得更高或更低。我试图通过更改下面的代码来做到这一点。

   var beginning = 0,
        end = lines[i].getTotalLength(),
        target = null;
    //console.log(lines[i])             
    //console.log(end)
    while (true){
      target = Math.floor((beginning + end) / 2);
      pos = lines[i].getPointAtLength(target);
      if ((target === end || target === beginning) && pos.x !== mouse[0]) {
          break;
      }
      console.log(pos)
      if (pos.x > mouse[0])      end = target;
      else if (pos.x < mouse[0]) beginning = target;
      else break; //position found
    } 

我的想法是重新计算end. 如果lines[0].getTotalLength()and的减法lines[1].getTotalLength()小于或大于一个值，则更新 end 的值（例如 end = end + …

这是我的 js 小提琴：https : //jsfiddle.net/DerNalia/3wzLv9yg/1/

我一直试图从这里解释代码：Multiseries line chart with mouseover tooltip，但我似乎无法让它工作。

到目前为止，这就是我所拥有的——它几乎是一个复制粘贴。

// append a g for all the mouse over nonsense
var mouseG = svg.append("g")
  .attr("class", "mouse-over-effects");

// this is the vertical line
mouseG.append("path")
  .attr("class", "mouse-line")
  .style("stroke", "black")
  .style("stroke-width", "1px")
  .style("opacity", "0");

// keep a reference to all our lines
var lines = document.getElementsByClassName('line');

// here's a g for each circle and text on the line
var mousePerLine = mouseG.selectAll('.mouse-per-line')
  .data(data)
  .enter()
  .append("g")
  .attr("class", "mouse-per-line");

// …

我已经使用d3.js创建了折线图，并在图表中添加了工具提示，在鼠标悬停时会创建一个小圆圈并显示y轴值。到此阶段，一切正常，但问题出在鼠标悬停时显示的圆的位置。

我希望此圆圈显示在线条上方，但始终显示在线条图上方或下方。

所以，我必须发出：

1. 要修复工具提示圆，使其始终位于折线图的直线上？
2. 如何显示定义点之间的点的y值？

.interpolate("basis")由于圈子位置变得混乱，我正在使用生成线。我不知道如何解决此问题，因为我需要.interpolate("basis")在我的代码中。

请任何人在此代码中了解如何解决这些问题：

var data = [{
    x: '1-May-12',
    y: 5
  }, {
    x: '30-Apr-12',
    y: 28
  }, {
    x: '27-Apr-12',
    y: 58
  }, {
    x: '26-Apr-12',
    y: 88
  }, {
    x: '25-Apr-12',
    y: 8
  }, {
    x: '24-Apr-12',
    y: 48
  }, {
    x: '23-Apr-12',
    y: 28
  }, {
    x: '20-Apr-12',
    y: 68
  }, {
    x: '19-Apr-12',
    y: 8
  }, {
    x: '18-Apr-12',
    y: 58
  }, {
    x: '17-Apr-12',
    y: 5
  }, { …

我对 D3 很陌生，只是将以下工具提示合并到我的应用程序中。我有一个单折线图和一个多折线图。

单行：https : //bl.ocks.org/alandunning/cfb7dcd7951826b9eacd54f0647f48d3

Multi Line：带有鼠标悬停工具提示的多系列折线图

如您所见，这两个工具提示的功能是不同的。Single Line 工具提示从每个数据点跳出，而 Multi Line 则继续跟随图表路径。我想更改多行功能以模仿单行工具提示的工作方式。

任何帮助将不胜感激。如果我需要提供更多信息，请告诉我。另请注意，我正在处理的数据是一组数组

下面是我的代码：

单线图：

let g = svg.append('g');
    g.append("path")
    .datum(this.dataObj)
    .attr("class",`line-${this.yAxisData} line`)
    .attr('d', line)
    .attr("stroke",`${this.color(this.dataObj.label)}`)
    .attr("fill",'none')
    .attr("transform",       `translate(${this.margin.left},${this.margin.top})`);

var focus = g.append("g")
    .attr("class", "focus")
    .style("display", "none");

    focus.append("line")
    .datum(this.dataObj)
    .attr("class", "x-hover-line hover-line")
    .attr("transform",`translate(${this.margin.left},${this.margin.top})`)
    .attr("stroke",`${this.color(this.dataObj.label)}`)
    .attr("y1", 0)
    .attr("y2", height);

    focus.append("circle")
    .datum(this.dataObj)
    .attr("transform",`translate(${this.margin.left},${this.margin.top})`)
    .attr("stroke",`${this.color(this.dataObj.label)}`)
    .attr("r", 7.5);

    focus.append("text")
    .attr("class","linetip")
    .attr("x", 40)
    .attr("dy", "0.5em");

    svg.append("rect")
    .attr("transform", `translate(${this.margin.left},${this.margin.top})`)
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height)
    .on("mouseover", function() { focus.style("display", null); })
    .on("mouseout", …