D3.js - 单击按钮时如何执行两个功能？答案

【问题标题】：D3.js - How to do perform two functions when clicking a button?D3.js - 单击按钮时如何执行两个功能？
【发布时间】：2018-03-19 14:19:06
【问题描述】：

我正在努力让一个按钮在点击时做两件事：

1) 使用 .force 移动我的气泡图

2) 在点击时呈现一些可见的文本

目前它将在圆圈上使用 .force，但忽略文本部分

    d3.select("#buttonid").on('click', function(d){
        simulation
            .force('x', d(forceXCombine))
            .alphaTarget(d(0.5))
            .restart(d)
        .select("#text_id_1").transition(d).duration(200).attr("visibility", 'visible')
        .select("#text_id_2").transition(d).duration(200).attr("visibility", 'visible') })

这里是文本 svg：

            svg.append("text")
                .attr("id",'text_id_1')
                .attr('fill', 'black')
                .attr('stroke','none')
                .attr("x", 40)
                .attr("y", 25)
                .attr('visibility','hidden')
                .attr("font-family", "Arial")
                .attr("font-size", 23)
                .text("text")

            svg.append("text")
                .attr("id",'text_id_2')
                .attr('fill', 'black')
                .attr('stroke','none')
                .attr('visibility','hidden')
                .attr("x", 540)
                .attr("y", 25)
                .attr("font-family", "Arial")
                .attr("font-size", 23)
                .text("some text")

还有按钮 id 以防万一

<button id="buttonid">text</button>

任何帮助将不胜感激

【问题讨论】：

不能把两个脚本放到同一个函数里吗？
老实说，这是我的理解。
你能告诉我怎么做吗？
我假设以 .select 开头的行是您想要使其可见的文本，并且根据我在文档中看到的内容，这些行在 simulation 变量时运行，它们应该会耗尽d 变量，因此将.select 更改为d.select 可能会解决此问题。
解决了这个问题吗？

标签： javascript d3.js

【解决方案1】：

假设以.select 开头的行是您所引用的“在点击时呈现一些可见的文本”。

.select 函数正在运行 simulation 变量，根据我在文档中看到的内容，它们应该运行在您在回调函数中定义的 d 变量，因此更改 @ 987654325@ 到 d.select 应该可以解决您的问题。

【讨论】：