javascript - 通过示例了解 D3 - 具有多个参数的 Mouseover、Mouseup

Question

我正在读取 http://bl.ocks.org/diethardsteiner/3287802 中的代码

但我不明白为什么以及鼠标悬停的代码是如何工作的:

   var arcs = vis.selectAll("g.slice")
     .data(pie)
     .enter()
     .append("svg:g")
     .attr("class", "slice")
     .on("mouseover", mouseover)
     .on("mouseout", mouseout)
     .on("click", up)
     ;

    ...

    function up(d, i) {
       updateBarChart(d.data.category, color(i));
       updateLineChart(d.data.category, color(i));   
    }

我可以看到“up”是一个鼠标事件处理程序，但是这里的“d”和“i”是什么？

我的意思是，当我们调用“on(”click”, up)时，它如何知道需要将哪个变量作为函数参数传递？似乎“d”和“i”指的是数据与“g.slice”及其索引相关联，但鼠标事件句柄不应该将事件对象作为默认参数吗？

此外，关于“d.data.category”，尽管声明了一个数据集变量，但我在代码中没有看到任何此类结构的数据。但为什么“d.data”会引用数据集中某个人的数据呢？

谢谢大家!!!

Answer 1

对于了解 JavaScript 但不熟悉 D3 的人来说，这确实看起来很奇怪，但这些参数(或参数)已经是 D3 所期望的:

When a specified event is dispatched on a selected node, the specified listener will be evaluated for each selected element, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element.

这些是在 D3 选择中使用函数时著名的 3 个参数:

the function is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element.

因此，当您在 D3 选择中执行类似操作时:

function(d,i,n){

你有 3 个论点:

1. d，命名为“datum”，是元素的基准。
2. i，代表“index”，是元素的索引；
3. n 是元素的组。

当然，您可以将它们命名为任何您想要的名称(“foo”、“bar”、“a”、“r2d2”等...)，这里重要的是顺序论据。

这是一个向您展示这一点的演示，请单击圆圈:

var width = 400,
    height = 150;
var data = [3,19,6,12,23];

var scale = d3.scaleLinear()
    .range([10, width - 10])
    .domain([0,30]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var circles = svg.selectAll("circle").data(data)
    .enter()
    .append("circle")
    .attr("r", 8)
    .attr("fill", "teal")
    .attr("cy", 50)
    .attr("cx", function(d) {
        return scale(d)
    })
    .on("click", up);

var axis = d3.axisBottom(scale);

var gX = svg.append("g")
    .attr("transform", "translate(0,100)")
    .call(axis);

function up(d,i){
  alert("datum is " + d + "; index is " + i);
  }

<script src="https://d3js.org/d3.v4.min.js"></script>

关于d.data.category，代码中都注释得很清楚:dataset同时具有“category”和“measure”，并且它绑定(bind)到SVG 。当您在 dataset 上使用 d3.layout.pie() 时，它会返回一个如下所示的对象数组:

{"data":  42, "value":  42, "startAngle": 42, "endAngle": 42, "padAngle": 42}

这就是 d.data 的来源。