Question

我试图突出显示d3折线图中的一个点。这需要在创建折线图并在另一个函数中绘制后在函数调用中完成。

折线图的绘制（以及svg对象的创建）发生在update_graph函数中。我正试图找出访问要在highlight_point函数调用中使用的svg对象的最佳方法。

我在这里创建了一个jsfiddle：https://jsfiddle.net/pxc0gpc6/4/当update_graph中的代码没有包含在函数调用中时，highlight_point代码按预期工作。但是当我在update_graph函数中有代码时，我不再知道如何访问svg对象。

我尝试过给svg一个id，以便我可以再次访问它，但突出显示的点不会最终被绘制在折线图区域上。我还试图通过在update_graph函数的末尾创建一个this.svg变量来使svg可以全局访问，但这也不起作用：

this.svg = svg;

Answer 1

问题1：

如何在update_graph函数中获取SVG实例。

制作一个ID并将其分配给这样的组：

  var svg = d3.select("body").append("svg")

    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("id", "myGroup")//assign id to  group

在您的功能访问组中，如下所示：

function highlight_point() {
  var svg = d3.select("#myGroup")

问题2：

如何访问行数据，以便为update_graph函数中的点创建圆圈。

  var data = d3.selectAll(".line").data();//get the line data
  data.forEach(function(d) {//for each line
    d.values.forEach(function(v) { //get each line's data points
      //iterate over the points
      var focus_red = svg.append("g")
        .attr("class", "focus")
        .style("stroke", "#ff0000")
        .style("display", null);

      focus_red.append("circle")
        .style("fill", "#ff0000")
        .style("stroke", "#ff0000")
        .attr("r", 4.5);
      //the x of the center defined by date
      //the y of the center defined by temperature
      focus_red.attr("transform", "translate(" + x(v.date) + "," + y(v.temperature) + ")");

    });

工作代码here

修改

突出显示第二点。

使用这样的过滤器：

data.forEach(function(d) { d.values.filter(function(k, i) { return i == 2; //select the second data form each line. }).forEach(function(v) { //make circle

工作代码here

如何访问另一个函数中定义的svg？

1 个答案: