5

csvファイルの一連のポイントからhttp://mbostock.github.com/d3/ex/voronoi.htmlを使用してボロノイ図を描画したいと思います。

コードを変更しました：

var w = 1200,
h = 800;

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

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

var svg = d3.select("#chart")
  .append("svg")
    .attr("width", w)
    .attr("height", h)
    .attr("class", "BuPu");


svg.selectAll("path")
    .data(d3.geom.voronoi(vertices))
  .enter().append("path")
    .attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; })
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; })

svg.selectAll("circle")
    .data(vertices.slice(1))
  .enter().append("circle")
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("r", 2)

 text1 = svg.append("svg:text")
    .text("control")
    .attr("x", 150)
    .attr("y", 200)
    .style("stroke", "orange")
    .style("stroke-width", 0)
    .style("font-size", "80%")
    .style("fill", "orange");

});

ポイントは正しく描画されますが、テッセレーションのポリゴンは正しく描画されません。

ヘッダー行とcsv.parse（）関数を追加しようとしましたが成功しませんでした。当初、解決策は配列を反復処理してフロートに解析することだと思っていましたが、それはできませんでした。それがとにかくポイントが正しく描かれる理由であるならば？

csvファイルは次のようになります。

0.0,0.0
116.78032769067718,0.0
193.02842412648215,78.92418723196411
323.01058809711515,54.15210221124609
378.8576448450217,202.5192012545716
...
4

1 に答える 1

0

おっしゃるように、数値が数値ではなく文字列として解析されるという問題だと思います。それがそれを壊しているものではないとしても、修正するのは良いことです。これはそれを行う1つの方法です（それを行うためのより慣用的な方法かもしれません、dunno）：

var vertices = d3.csv.parseRows(
  datasetText,
  function(pt) { return [parseFloat(pt[0]), parseFloat(pt[1])]; })
);

それはあなたの問題を解決するかもしれません。

于 2012-10-26T19:19:08.070 に答える