Question

我是javascript的新手。我正在使用D3来构建一些图表。我想显示SVG元素上的鼠标点击次数。

目前我可以显示椭圆并可以跟踪椭圆上的点击次数。我想要在椭圆上叠加不断变化的鼠标点击次数。

我让它工作，以便显示初始变量，但无法解决如何显示变量（即额外的鼠标点击）。我想要它，以便一旦点击椭圆，文本就会更新。

我的代码如下。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
    <div id="viz"></div>
    <script type="text/javascript">
    var clicks = 0;
    var sampleSVG = d3.select("#viz")
        .append("svg:svg")
        .attr("width", 400)
        .attr("height", 800);    
    sampleSVG.append("svg:ellipse")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("rx", 20)
        .attr("ry", 25)
        .attr("cx", 50)
        .attr("cy", 50)
        .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");})
        .on("click", function(){clicks = clicks+1
                    })
    sampleSVG.append("svg:text")
        .text(clicks)
        .attr("x", 50)
        .attr("y", 50)
        .attr("fill", "black"); 
    </script>
</body>
</html>

我尝试添加 sampleSVG.text（点击）我的onclick功能，但它没有工作。

另外，作为一个更一般的问题，我的文本（var clicks）是否应附加到sampleSVG 或者我应该创建一个新的变量sampleText并将其覆盖在sampleSVG上？

谢谢你的帮助

[R

Answer 1

说sampleSVG.text(clicks)设置外部svg：svg元素的文本内容，删除所有包含的元素;您想要设置svg：text元素的文本内容。您可以在单击时选择文本元素：

.on("click", function() {
  clicks = clicks + 1;
  sampleSVG.select("text").text(clicks);
})

或者，在创建文本元素时，可以保存对它的引用：

var sampleText = sampleSVG.append("text")
    .text(clicks)
    .attr("x", 50)

然后您可以点击访问此元素：

.on("click", function() {
  clicks = clicks + 1;
  sampleText.text(clicks);
})

如何使用D3将javascript变量显示为文本

1 个答案: