D3.js - 单击按钮时如何执行两项功能?

时间:2018-03-19 14:19:07

标签: javascript d3.js

我正在努力获得一个按钮来点击两件事:

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') })

这是文本svgs:

            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>

任何帮助将不胜感激

1 个答案:

答案 0 :(得分:1)

假设以.select开头的行是你引用的“在点击时呈现一些文字”。

.select函数正在运行simulation变量,根据我在文档中看到的,它们应该运行您在“{1}}变量中定义的d变量”回调函数,因此将.select更改为d.select可以解决您的问题。