0

D3の学習を始めたばかりです。チュートリアル Web サイトから、次のコードを見つけました。

<!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>

このコードは、画面に円を配置します。画面に 3 つの円を個別に配置する方法はありますか? 次のコードのように、データをグラフにバインドし、同時に複数の円を生成することについて話しているのではありません。

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
4

1 に答える 1

2

div ID で配列を作成し、これをループします。

var tempArray = ["viz", "viz1", "viz2", "viz3"];

このフィドルを確認してください： http://jsfiddle.net/EhqVh/

JS

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");
    });
}

HTML

<div id="viz"></div>
于 2013-07-10T23:45:06.003 に答える