Question

我是d3的新手，目前正在尝试使用Mike Bostock提供的示例创建一个简单的折线图，我已经对下面的代码感到厌烦。

<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

    var svg = d3.select("svg"),
        margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var parseTime = d3.timeParse("%d-%b-%y");

    var x = d3.scaleTime()
        .rangeRound([0, width]);

    var y = d3.scaleLinear()
        .rangeRound([height, 0]);

    var line = d3.line()
        .x(function(d) { return x(d.date);  })
        .y(function(d) { return y(d.close);  });

    d3.tsv("data.tsv", function(d) {
        d.date = parseTime(d.date);
        d.close = +d.close;
        return d;

    }, function(error, data) {
        if (error) throw error;
        x.domain(d3.extent(data, function(d) { return d.date;  }));
        y.domain(d3.extent(data, function(d) { return d.close;  }));

        g.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x))
            .select(".domain");

        g.append("g")
            .call(d3.axisLeft(y))
            .append("text")
            .attr("fill", "#000")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", "0.71em")
            .attr("text-anchor", "end")
            .text("Weight (lbs)");

        g.append("path")
            .datum(data)
            .attr("fill", "none")
            .attr("stroke", "steelblue")
            .attr("stroke-linejoin", "round")
            .attr("stroke-linecap", "round")
            .attr("stroke-width", 1.5)
            .attr("d", line)
            .on("mouseover", handleMouseOver);
    });

    function handleMouseOver(d,i) {
        console.log(d);
        console.log(i);
    }

</script>

取自以下链接，如果您要使用示例数据https://bl.ocks.org/mbostock/3883245

进行测试，请附加链接

问题是我想添加一个新功能，用户可以将鼠标悬停在该行的一部分上，看看当时数据的价值是什么，我的理解是我为每个添加了一条新路径在数据中输入，问题是，当我向mouseover事件添加一个回调时，假设接收为一个参数，数据像这样悬停：

   g.append("path")
            .datum(data)
            .attr("fill", "none")
            .attr("stroke", "steelblue")
            .attr("stroke-linejoin", "round")
            .attr("stroke-linecap", "round")
            .attr("stroke-width", 1.5)
            .attr("d", line)
            .on("mouseover", handleMouseOver);

    function handleMouseOver(d,i) {
        console.log(d);
        console.log(i);
    }

console.log（d）显示数据数组中的所有数据，而不是正在悬停的数组中的特定条目，也是我总是给出的索引0.我想知道我做错了什么或者我该怎么做到这一点。提前谢谢。

Answer 1

对最后一个追加采用以下代码（其他所有内容都保持不变;在该块中，我也只更改了以//!!结尾的行：

    g.append("g").selectAll("path").data(data.slice(0, data.length-1)).enter().append("path") //!!
        //.datum(data) //!!
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d", function(d,i){return line([data[i], data[i+1]])}) //!!
        .on("mouseover", handleMouseOver);

根据细分，您可以在鼠标悬停时获得正确的数据和索引。

让我稍微深入了解背景：

datum将整个数据设置为唯一路径实例的输入（当检查上面代码中的DOM或bl.ocks.org时，您只会看到一个<path>一个疯狂的d。这很好，因为line()函数可以很好地处理这个问题。但是，mouseover只有一个元素没有帮助
因此，我选择了另一种方法，每个线段只有一个path：我的代码有一个疯狂的<path>个，每个都有一个非常简单的d。但是，每个路径都可以有一个单独的鼠标悬停
为了不被淹没，我将所有路径都包含在一个g中，无论如何都不会受到伤害
我确实使用了data()函数。您可以在此处阅读详细信息：https://github.com/d3/d3-selection#selection_data
简而言之，我告诉它选择目前在path（无）之下的所有g个元素，并根据需要添加尽可能多的新path以满足以下数据：手。然后，对于每个path，请应用下一行
（这还没有从新数据更新，但我想保持简短）
最后，为了让它听起来，我必须为每个输入切片data
（我现在没有使用ES6语法来简化，虽然ES6会看起来更好而且更短。但是，结果并不重要）

为什么mouserover会在回调中返回所有数据

1 个答案: