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）时，它如何知道需要传递哪个变量作为函数Argument？似乎“d”和“i”指的是数据与“g.slice”及其索引相关联，但是不是一个鼠标向上的事件句柄应该将Event对象作为默认参数？

此外，关于“d.data.category”，虽然声明了数据集变量，但我在代码中看不到任何此类结构的数据。但是为什么“d.data”会引用数据集中Person的数据？

谢谢大家!!!

Answer 1

对于那些了解JavaScript但不熟悉D3的人来说，这确实很奇怪，但这些参数（或参数）已经被D3预期了：

当在选定节点上调度指定事件时，将为每个选定元素计算指定的侦听器，传递当前数据（d），当前索引（i）和当前组（节点），这是当前的DOM元素。

当您在D3选择中使用函数时，这些是着名的3个参数：

为每个选定的元素评估函数，按顺序传递当前数据（d），当前索引（i）和当前组（节点），并将其作为当前DOM元素。

所以，当你在D3选择中做这样的事情时：

function(d,i,n){

你有3个参数：

d，就像“datum”这样命名，是元素的基准。
i，对于“index”，是元素的索引;
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同时具有“类别”和“度量”，并且它与SVG绑定。在d3.layout.pie()上使用dataset时，它会返回一个对象数组，如下所示：

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

这就是d.data的来源。

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

1 个答案: