Javascript D3多重链接焦点/鼠标悬停工具提示：十字线焦点线不适合x轴_Javascript_D3.js

Javascript D3多重链接焦点/鼠标悬停工具提示：十字线焦点线不适合x轴

javascript d3.js

Javascript D3多重链接焦点/鼠标悬停工具提示：十字线焦点线不适合x轴,javascript,d3.js,Javascript,D3.js,我正在尝试结合中的focus mouseover+十字线功能。我想要的y型十字准线一直在x线上拍摄我的问题似乎出现在代码的这一部分（参见第227行），其中我试图相对yScale和yDomain设置焦点行的端点 var yDomain = d3.extent(d.values, function(d) { return d.price; }); focus.select('#focusLineX') .attr("x1", 0)

我正在尝试结合中的focus mouseover+十字线功能。我想要的y型十字准线一直在x线上拍摄
我的问题似乎出现在代码的这一部分（参见第227行），其中我试图相对yScale和yDomain设置焦点行的端点

var yDomain = d3.extent(d.values, function(d) { return d.price; });

            focus.select('#focusLineX')
            .attr("x1", 0)
            .attr("y1", 0)
            .attr("x2", 0)
            .attr("y2", ys[d.key](yDomain[0]));

然而，我还没有完全掌握它的窍门。这是我的完整代码

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font: 10px sans-serif;
    margin: 0;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

  .line {
    fill: none;
    stroke: steelblue;
    stroke-width: 2px;
  }

  .area {
    //fill: #e7e7e7;
    fill: transparent;
  }

  .overlay {
    fill: none;
    pointer-events: all;
  }

  .focus circle {
    fill: none;
    stroke: red;
    r: 4.5;
  }

  .focusLine {
    stroke: blue;
    stroke-dasharray: 3,3;
    opacity: 0.5;
  }
</style>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script>
    var margin = {
        top: 20,
        right: 45,
        bottom: 20,
        left: 40
      },
      width = 961 - margin.left - margin.right,
      height = 138 - margin.top - margin.bottom;
    var parseDate = d3.time.format("%b %Y").parse,
      bisectDate = d3.bisector(function(d) {
        return d.date;
      }).left,
      formatValue = d3.format(",.2f"),
      formatDate = d3.time.format("%X"),
      formatCurrency = function(d) {
        return formatValue(d);
      };

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

    // variable to hold our yscales
    var ys = {};

    var area = d3.svg.area()
      .x(function(d) {
        return x(d.date);
      })
      .y0(height)
      .y1(function(d) {
        return ys[d.symbol](d.price); //<-- call the y function matched to our symbol
      });

    var line = d3.svg.line()
      .x(function(d) {
        return x(d.date);
      })
      .y(function(d, i) {
        return ys[d.symbol](d.price); //<-- call the y scale function matched to our symbol
      });

    var xAxis = d3.svg.axis()
      .scale(x) // x is the d3.time.scale()
      .orient("bottom") // the ticks go below the graph
      .ticks(4) // specify the number of ticks
      .tickFormat(d3.time.format("%H:%M"));

    d3.csv("stocks_chart_komplett.csv", type, function(error, data) {

      // Nest data by symbol.
      var symbols = d3.nest()
        .key(function(d) {          
          return d.symbol;
        })
        .entries(data);

      // Compute the maximum price per symbol, needed for the y-domain.
      symbols.forEach(function(s) {
        var maxPrice = d3.max(s.values, function(d) {
          return d.price;
        });
        ys[s.key] = d3.scale.linear() //<-- create a scale for each "symbol" (ie Sensor 1, etc...)
          .range([height, 0])
          .domain([0, maxPrice]);
      });

      // Compute the minimum and maximum date across symbols.
      // We assume values are sorted by date.
      x.domain([
        d3.min(symbols, function(s) {
          return s.values[0].date;
        }),
        d3.max(symbols, function(s) {
          return s.values[s.values.length - 1].date;
        })
      ]);

      // Add an SVG element for each symbol, with the desired dimensions and margin.
      var svg = d3.select("body").selectAll("svg")
        .data(symbols)
        .enter().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 + ")");

      // Add the area path elements. Note: the y-domain is set per element.
      svg.append("path")
        .attr("class", "area")
        .attr("d",area);

      // Add the line path elements. Note: the y-domain is set per element.
      svg.append("path")
        .attr("class", "line")
        .attr("d", function(d) {
          return line(d.values);
        });

      // Add a small label for the symbol name.
      svg.append("text")
        .attr("x", width - 6)
        .attr("y", height - 6)
        .style("text-anchor", "end")
        .text(function(d) {
          return "<"+d.key+"> value now: "+d.values[d.values.length - 1].price+" "+d.values[d.values.length - 1].unit;
        });

      svg.append('g') // create a <g> element
        .attr('class', 'x axis') // specify classes
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis); // let the axis do its thing

      // build 4 y axis
      var axisGs = svg.append("g"); //<-- create a collection of axisGs

      axisGs
        .attr("class", "y axis")
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text(function(d) {
          return d.values[d.values.length - 1].unit;
        });

      axisGs.each(function(d, i) { //<-- for each axisG create an axis with it's scale
        var self = d3.select(this);
        self.call(
          d3.svg.axis()
          .scale(ys[d.key])
          .orient("left")
          .ticks(4)
        );
      });

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

       focus.append("circle")

      focus.append("text")
        .attr("x", 0)
        .attr("dy", "-.90em")
        .style("font-size","12px")
        .style("fill", "grey")
        .style("text-anchor", "middle");

      svg.append("rect")
        .attr("class", "overlay")
        .attr("width", width)
        .attr("height", height)
        .on("mouseover", function() {
          focus.style("display", null);
        })
        .on("mouseout", function() {
          focus.style("display", "none");
        })
        .on("mousemove", mousemove);

        // append the x line
        focus.append("line")
            .attr('id', 'focusLineX')
            .attr("class", "focusLine");

        // append the y line
        focus.append("line")
            .attr('id', 'focusLineY')
            .attr("class", "focusLine");

      function mousemove() {
        var date, index,index_diff;
        date = x.invert(d3.mouse(this)[0]);
        var focus = svg.selectAll(".focus");
        focus.attr("transform", function(d) {

            index = bisectDate(d.values, date, 0, d.values.length - 1);

            var yDomain = d3.extent(d.values, function(d) { return d.price; });

            focus.select('#focusLineX')
            .attr("x1", 0)
            .attr("y1", 0)
            .attr("x2", 0)
            .attr("y2", ys[d.key](yDomain[0]));


            console.log(yDomain[0]);

            //.attr("y2", ys[d.key]);

            // focus.select('#focusLineY')
            // .attr("x1", -width)
            // .attr("y1", 0)
            // .attr("x2", width)
            // .attr("y2", 0);

           //console.log(index, d.values[index].symbol, d.values[index].date, d.values[index].price);
            focus.selectAll("text").text(function (d){

                return (""+formatDate(d.values[index].date)+", "+d.values[index].price+"")
            });
          // adjust mouseover to use appropriate scale
          return "translate(" + x(d.values[index].date) + "," + ys[d.key](d.values[index].price) + ")"
        });
      }
    });

    function type(d) {
      d.price = +d.price;
      d.date = parseDate(d.date);
      return d;
    }
  </script>
  </body>
 </html>


身体{
字体：10px无衬线；
保证金：0；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.线路{
填充：无；
笔画：钢蓝；
笔画宽度：2px；
}
.区域{
//填充：#e7e7e7；
填充：透明；
}
.覆盖{
填充：无；
指针事件：全部；
}
.焦点圈{
填充：无；
笔画：红色；
r:4.5；
}
.焦点线{
笔画：蓝色；
笔划数组：3,3；
不透明度：0.5；
}
var保证金={
前20名，
右：45，
底数：20，
左：40
},
宽度=961-margin.left-margin.right，
高度=138-margin.top-margin.bottom；
var parseDate=d3.time.format（“%b%Y”）.parse，
平分日期=d3.平分线（函数（d）{
返回日期；
}).左，
formatValue=d3.format（“，.2f”），
formatDate=d3.time.format（“%X”），
formatCurrency=函数（d）{
返回值（d）；
};
var x=d3.time.scale（）
.范围（[0，宽度]）；
//变量来保存我们的YScale
var ys={}；
var area=d3.svg.area（）
.x（功能（d）{
返回x（d.日期）；
})
.y0（高度）
.y1（功能（d）{
return ys[d.symbol]（d.price）；//您可以在svg:clipPath的帮助下执行此操作。我制作了一个clipPath，该clipPath限制在由不包括x和y轴的折线图组成的区域
这条线出现的原因是，yDomain[0]
是这条线的最大y，您正在平移这条线，使它出现在正确的位置，但是您将无法处理在x轴之外的额外线
focus.select('#focusLineX')
            .attr("x1", 0)
            .attr("y1", 0)
            .attr("x2", 0)
            .attr("y2", ys[d.key](yDomain[0]));

我已经用剪辑路径更新了代码，下面是.
非常感谢您的快速修复！我从来没有想到过！但是这个解决方法很容易出现问题，因为它还剪辑必须越过轴线的焦点/工具提示对象（例如，当显示Ymin/Ymax值时，我仍然非常希望找到解决方案，以解决右多重图表的右焦点线起点/终点问题