d3.js - CSVD3.jsの各行の円を生成します

Question

CSVを読み込んで、d3.jsを使用して各行に円を生成しようとしています。

[コールバック関数を使用したくないのですが、それは別の質問です。]

次のデータ行ごとにテーブルを作成できます：http：//christopheviau.com/d3_tutorial/

しかし、各行に円を生成することはできないようです。

d3.text("test.csv", function(datasetText) {

var parsedCSV = d3.csv.parseRows(datasetText);

var sampleSVG2 = d3.select("#viz")
    .append("svg")
    .attr("width", 100)
    .attr("height", 100);

sampleSVG2.selectall("circle")
    .data(parsedCSV)
    .enter().append("circle")
    .style("stroke", "gray")
    .style("fill", "blue")

Answer 1

これはおそらく「正しい」ものではありませんが、機能します。各行と各円の新しいsvg領域を呼び出すことにより、それは機能しました。

var sampleSVG = d3.select("#potato")
        .data(parsedCSV)
        .enter().append("circle")
        .append("svg")
        .attr("width", 100)
        .attr("height", 100);

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