1

我是 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(clicks) 添加到我的 onclick 函数，但它不起作用。

同样作为一个更普遍的问题，我的文本（var clicks）应该附加到sampleSVG还是应该创建一个新变量sampleText并将其覆盖在sampleSVG上？

谢谢您的帮助

R

4

1 回答 1

2

SayingsampleSVG.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);
})
于 2012-04-11T16:23:41.107 回答