SVGで複数の矩形をD3エラーで作成する

例では、カスタムデータに基づいて3つの矩形を作成しています。私は私の3つの矩形を持っている必要がありますが、まだエラーを取得する必要があります。助けてもらえますか？SVGで複数の矩形をD3エラーで作成する

SNIPPET：

<html> 

<head> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script> 

<script> 

$(document).ready(function(){ 

    //our basic data 
    var rectData = [ 
     { "x": 30, "y": 30, "width": 20, "height" : 10 }, 
     { "x": 70, "y": 70, "width": 20, "height" : 20}, 
     { "x": 110, "y": 100, "width": 20, "height" : 30} 
    ]; 

    //selection of svg 
    var mySVG = d3.select("svg"); 

    //create rectangle skeleton 
    var rect = mySVG.selectAll("rect") 
      .data(rectData) 
      .enter() 
      .append("rect"); 

    //Draw the Rectangle 
    mySVG.append("rect") 
     .attr("x", function (d) { return d.x; }) 
     .attr("y", function (d) { return d.y; }) 
     .attr("width", function (d) { return d.width; }) 
     .style("height", function(d) { return d.height; }); 

}); 

</script> 
</head> 
<body> 
    <svg width="500px" height="500px"></svg> 
</body> 
</html>

エラー：

.attr("x", function (d) { return d.x; })

、プログラムでerrrorが何であるかを知ることで手伝って、私は3の作成を手伝ってください配列内のカスタムデータに基づく四角形。前もって感謝します。

出典

2016-11-10 Deadpool

あなたの「入力」の選択が含まれているあなたの最近作成rect変数を使用する必要があります。

rect.attr("x", function (d) { return d.x; }) 
    .attr("y", function (d) { return d.y; }) 
    .attr("width", function (d) { return d.width; }) 
    .style("height", function(d) { return d.height; });

あなただけである、属性を設定するmySVGを使用しているため、このエラーを取得していますSVG選択であり、バインドされたデータはありません（したがって、d.x、d.yなど...）。

出典

2016-11-10 06:20:34

次の2つのスクリプトを1つにまとめるだけです。

//create rectangle skeletons and draw the rectangles 
var rect = mySVG.selectAll("rect") 
     .data(rectData) 
     .enter() 
     .append("rect"); 
     .attr("x", function (d) { return d.x; }) 
     .attr("y", function (d) { return d.y; }) 
     .attr("width", function (d) { return d.width; }) 
     .style("height", function(d) { return d.height; });

https://jsfiddle.net/mwf2d1fd/へ

//create rectangle skeleton 
var rect = mySVG.selectAll("rect") 
     .data(rectData) 
     .enter() 
     .append("rect"); 

//Draw the Rectangle 
mySVG.append("rect") 
    .attr("x", function (d) { return d.x; }) 
    .attr("y", function (d) { return d.y; }) 
    .attr("width", function (d) { return d.width; }) 
    .style("height", function(d) { return d.height; });

変更JSのフィドル

出典

2016-11-10 06:32:45 ScottyDoesKnow

SVGで複数の矩形をD3エラーで作成する

答えて

関連する問題