Fatal编程技术网

Javascript 使用D3创建三个圆

javascript html d3.js

Javascript 使用D3创建三个圆,javascript,html,d3.js,Javascript,Html,D3.js,我刚开始学习D3。在教程网站上，我发现了以下代码： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> </head> <body> <div id="viz"></div&g

我刚开始学习D3。在教程网站上，我发现了以下代码：

<!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 sampleSVG = d3.select("#viz")
    .append("svg")
    .attr("width", 100)
    .attr("height", 100);    

    sampleSVG.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 50)
    .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
    .on("mouseout", function(){d3.select(this).style("fill", "white");});

    </script>
</body>
</html>


var sampleSVG=d3.选择（“即”）
.append（“svg”）
.attr（“宽度”，100）
.attr（“高度”，100）；
sampleSVG.append（“圆”）
.style（“笔划”、“灰色”）
.样式（“填充”、“白色”）
.attr（“r”，40）
.attr（“cx”，50）
.attr（“cy”，50）
.on（“mouseover”，function（）{d3.select（this）.style（“fill”，“aliceblue”）；}）
.on（“mouseout”，function（）{d3.select（this）.style（“fill”，“white”）；}）；
此代码在屏幕上放置一个圆圈。我想知道有没有办法在屏幕上分别放置三个圆圈？我不是说将数据绑定到图形并同时生成几个圆，就像下面的代码所做的那样：

var dataset = [];
var i = 0;
for( i = 0; i < 5; ++i){
     dataset.push(Math.round(Math.random() * 100));         
}
i = 0.5;
var sampleSVG = d3.select("#viz")
    .append("svg")
    .attr("width", 500)
    .attr("height", 100);        

sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", function(){return (i++) * 80;})
.attr("cy", 40)
.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
.on("mouseout", function(){d3.select(this).style("fill", "white");})
.on("mousedown", animateFirstStep); //animateFirstStep is some transition() function

var数据集=[]；
var i=0；
对于（i=0；i<5；++i）{
push（Math.round（Math.random（）*100））；
}
i=0.5；
var sampleSVG=d3.选择（“即”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，100）；
示例VG.选择全部（“圆圈”）
.数据（数据集）
.enter（）.append（“圆”）
.style（“笔划”、“灰色”）
.样式（“填充”、“白色”）
.attr（“r”，40）
.attr（“cx”，function（）{return（i++）*80；}）
.attr（“cy”，40）
.on（“mouseover”，function（）{d3.select（this）.style（“fill”，“aliceblue”）；}）
.on（“mouseout”，function（）{d3.select（this）.style（“fill”，“white”）；}）
.on（“鼠标向下”，动画第一步）//animateFirstStep是一个transition（）函数
使用您的div id创建一个数组，并在此循环

var tempArray = ["viz", "viz1", "viz2", "viz3"];
检查这把小提琴：

JS

var tempArray=[“viz”、“viz1”、“viz2”、“viz3”]；
对于（var i=0；i
HTML
你是否尝试过将代码放入循环并调用3次？@Leetylor谢谢你的提示。他说的是3次而不是4次！顺哈哈，只是开玩笑。回答得好。第四个是礼物：D 
var tempArray = ["viz", "viz1", "viz2", "viz3"];
for (var i = 0; i < tempArray.length; i++) {
    var sampleSVG = d3.select("#"+tempArray)
        .append("svg")
        .attr("width", 100)
        .attr("height", 100);

    sampleSVG.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 50)
    .on("mouseover", function () {
    d3.select(this).style("fill", "aliceblue");
    })
        .on("mouseout", function () {
        d3.select(this).style("fill", "white");
    });
}

<div id="viz"></div>