Javascript 如何在D3中链接函数调用？_Javascript_D3.js

Javascript 如何在D3中链接函数调用？

javascript d3.js

Javascript 如何在D3中链接函数调用？,javascript,d3.js,Javascript,D3.js,定义了一个绘图函数以便重用，但它是独立的语句 draw(circles); 有没有办法把（重写）draw函数放回D3的函数链 svg.selectAll("circle") .data(dataset) .enter() .append("circle") .draw(???) //not work. 这是代码。一个工作版本是 var draw=函数（圆）{ 圆。属性（“cx”，函数（d，i）

定义了一个绘图函数以便重用，但它是独立的语句

draw(circles);

有没有办法把（重写）draw函数放回D3的函数链

svg.selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle")
            .draw(???) //not work.

这是代码。一个工作版本是


var draw=函数（圆）{
圆。属性（“cx”，函数（d，i）{
返回（i*50）+25；
})
.attr（“cy”，h/2）
.attr（“r”，函数（d）{
返回d；
});
};
var w=500，h=50；
var数据集=[5,10,15,20,25]；
var数据集2=[25,20,15,10,5]；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var circles=svg.selectAll（“圆”）
.数据（数据集）
.输入（）
.附加（“圆圈”）
画（圆）；
var circles2=svg.selectAll（“圆圈”）
.数据（数据集2）
.transition（）
.期限（2000年）；
画（圈2）；

在draw（）中使用call（）+this。一个工作版本是

只需从

draw

circles

，这可能有助于解释问题：

<body>
    <script type="text/javascript">

        var draw = function (circles) {
            circles.attr("cx", function (d, i) {
                return (i * 50) + 25;
            })
         .attr("cy", h / 2)
         .attr("r", function (d) {
            return d;
         });
        };

        var w = 500, h = 50;

        var dataset = [5, 10, 15, 20, 25];
        var dataset2 = [25, 20, 15, 10, 5];

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

        var circles = svg.selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle")

        draw(circles);

        var circles2 = svg.selectAll("circle")
        .data(dataset2)
        .transition()
        .duration(2000);

        draw(circles2);

    </script>
</body>

var draw = function () {
    this.attr("cx", function (d, i) {
        return (i * 50) + 25;
    })
    .attr("cy", h / 2)
    .attr("r", function (d) {
        return d;
    });
};

circles
.data(dataset)
.enter()
.append("circle")
.call(draw)
.data(dataset2)
.transition()
.attr("fill", "red")
.duration(2000)
.call(draw);