javascript - 另一种写法？

Question

首先，我使用的是 d3.js 和 SVG。我有一段绘制路径的代码:

var one = d3.select('#canvas1');
var oneCanvas = one.append("svg").attr("width", 200).attr("height", 190);
oneCanvas.append("svg:path")
        .attr("d", "M100 15 A 55 55, 0, 0, 0, 73 61 A 55 55, 0, 0, 1, 127 61 A 64 64, 0, 0, 0, 100 15")
        .style("stroke","black")
        .style("fill", "white")
        .style("stroke-width", 1)
        .on("click", function(){
            d3.select(this).style("fill", "magenta");
            alert("You've clicked on the path in the 1st div");
        });    

我在整个过程中使用了大约 20 次这条路径。使用这种方法，我一次又一次地重复上面的代码，如 https://jsfiddle.net/s26kghmq/ 所示。

我不使用 'd3.selectAll' 的原因是，如果这样做，我将无法在单击路径时设置不同的功能。

我实现了 svg 的 'def' 和 'use'，但这对我也没有帮助，因为如果我之前设置了样式，我不能如此处所述，在 'use' 中再次覆盖它:http://taye.me/blog/svg/a-guide-to-svg-use-elements/

我想知道是否有另一种方法可以在不重复的情况下实现功能？

预先感谢您的所有回答。

Answer 1

.on 事件中的回调是否不同并不重要，有很多方法可以处理它。 d3 是关于数据绑定(bind)、迭代和不重复代码的。所以，你真的，真的应该使用 selectAll。

var data = [1,2];

var color = d3.scale.ordinal()
  .domain(data)
  .range(['magenta','yellow']);

var one = d3.selectAll('.v1')
  .data(data)
  .append("svg")
  .attr("width", 200)
  .attr("height", 190)
  .append("svg:path")
  .attr("d", "M100 15 A 55 55, 0, 0, 0, 73 61 A 55 55, 0, 0, 1, 127 61 A 64 64, 0, 0, 0, 100 15")
  .style("stroke","black")
  .style("fill", "white")
  .style("stroke-width", 1)
  .on('click', function(d){
    d3.select(this).style("fill", color(d));
    alert("You've clicked on the path in the " + d + " div");
  });

.v1{
  width: 200px;
  height: 100px;
  background: white;
  border: 1.5px solid #000000;
}

#canvas2{
  position: absolute;
  top: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="canvas1" class="v1"></div>

<div id="canvas2" class="v1"></div>

---

评论更新

如果回调每个数据 都是唯一的，那么它们也将成为数据的属性。此外，您始终可以划分出共享功能和特定功能:

function sharedFunc(elem,d){
  d3.event.stopPropagation();
  d3.select(elem).style('fill', d.color);
}

var data = [
  {
    specificFunc: function(d){
       alert("you've clicked the 1st one");
    },
    color: 'magenta'
  },{
    specificFunc: function(d){
       alert("you've clicked the 2nd one");
    },
    color: 'yellow'
  }
];

d3.selectAll('.v1')
  .data(data)
  .append("svg")
  .attr("width", 200)
  .attr("height", 190)
  .append("svg:path")
  .attr("d", "M100 15 A 55 55, 0, 0, 0, 73 61 A 55 55, 0, 0, 1, 127 61 A 64 64, 0, 0, 0, 100 15")
  .style("stroke","black")
  .style("fill", "white")
  .style("stroke-width", 1)
  .on('click', function(d){
    sharedFunc(this, d);
    d.specificFunc(d);
  }); 

$("#canvas1").click(function(){
    alert("you clicked on the canvas");
});

.v1{
  width: 200px;
  height: 100px;
  background: white;
  border: 1.5px solid #000000;
}

.v2{
  width: 200px;
  height: 100px;
  background: white;
  border: 1.5px solid #000000;
}

#canvas2{
  position: absolute;
  top: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="canvas1" class="v1"></div>
<div id="canvas2" class="v1"></div>