16

このさまざまな方法を試しましたが、何も機能していないようです。これが私が現在持っているものです：

var vis = d3.select("#chart").append("svg")
         .attr("width", 1000)
         .attr("height", 667),

 scaleX = d3.scale.linear()
        .domain([-30,30])
        .range([0,600]),

scaleY = d3.scale.linear()
        .domain([0,50])
        .range([500,0]),

poly = [{"x":0, "y":25},
        {"x":8.5,"y":23.4},
        {"x":13.0,"y":21.0},
        {"x":19.0,"y":15.5}];

vis.selectAll("polygon")
    .data(poly)
    .enter()
    .append("polygon")
    .attr("points",function(d) { 
        return [scaleX(d.x),scaleY(d.y)].join(",")})
    .attr("stroke","black")
    .attr("stroke-width",2);

ここでの問題は、ポイントデータを個々のポイントオブジェクトの配列として定義する方法、または関数の作成方法に関係していると思います.attr("points",...

単純なポリゴンを描画する方法のチュートリアルまたは例をウェブ全体で探していますが、それを見つけることができないようです.

4

3 に答える 3

31

ポリゴンは次のようになります。<polygon points="200,10 250,190 160,210" />

したがって、完全なポリゴン配列は、1 つのポリゴンを作成する 1 つの長い文字列を生成する必要があります。1 つのポリゴンについて話しているため、データ結合も 1 つの要素のみを持つ配列である必要があります。これが、以下のコードが示す理由data([poly])です。2 つの同一のポリゴンが必要な場合は、これを に変更しdata([poly, poly])ます。

目標は、4 つのオブジェクトを使用して配列から 1 つの文字列を作成することです。これには amapと anotherを使用しましたjoin：

poly = [{"x":0.0, "y":25.0},
        {"x":8.5,"y":23.4},
        {"x":13.0,"y":21.0},
        {"x":19.0,"y":15.5}];

vis.selectAll("polygon")
    .data([poly])
  .enter().append("polygon")
    .attr("points",function(d) { 
        return d.map(function(d) {
            return [scaleX(d.x),scaleY(d.y)].join(",");
        }).join(" ");
    })
    .attr("stroke","black")
    .attr("stroke-width",2);

作業フィドルを参照してください: http://jsfiddle.net/4xXQT/

于 2012-11-03T00:27:07.527 に答える
1

ポリゴン形状を描画しようとしていますか? - このような。http://bl.ocks.org/2271944コードの開始部分は、典型的なチャートのように見えます。通常、このような結果になります。

chart.selectAll("line")
     .data(x.ticks(10))
   .enter().append("line")
     .attr("x1", x)
     .attr("x2", x)
     .attr("y1", 0)
     .attr("y2", 120)
.style("stroke", "#ccc");
于 2012-11-03T00:19:21.493 に答える