再利用可能なsvgエンティティを作成するために必要なd3構造体は何ですか

私はDITA（XML）からJSONに変換されたAPI記述を使用して、d3で鉄道図を作成しています。私はさまざまな要素を一度しか定義しません（sidingLとsidingRのように私のコードにあります）。私はsidingスタイルを持っています。私はsidingL（およびsidingRのバリアント）を持っている私のグローバル変数の宣言で：再利用可能なsvgエンティティを作成するために必要なd3構造体は何ですか

var sidingL = d3.svg.path() 
    .attr("d", "M50,0 v80 a10,10 0 0 10,10 h20") 
    .attr("class", "siding");

その後、SVGキャンバス（svgContainer）を追加した後、私が追加：

私はインスタンス化を望んだ

var L = svgContainer.append(sidingL); 
    var R = svgContainer.append(sidingR);

をそれぞれのインスタンスsidingLとsidingR

この実験では、SVGキャンバスに表示された各サイディングのうちの1つを表示するために、ほとんどのコードを削除しましたs。何もレンダリングされておらず、Firefox Web Developer Toolkit、Console、またはDebugビューで役立つものは何も表示されません。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Railroad siding</title> 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
     <link 
href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' 
rel='stylesheet' type='text/css'> 
    <style> 
    .siding { 
    fill: none; 
    stroke: black; 
    stroke-width: 6px; 
    stroke-linecap: round; 
    stroke-linejoin: round; 

    } 
    </style> 
</head> 
<body> 
<script type="text/javascript"> 

    //set up constants 
    var canvasWidth= 4000; 
    var canvasHeight=800 

    var sidingL = d3.svg.path() 
    .attr("d", "M50,0 v80 a10,10 0 0 10,10 h20") 
    .attr("class", "siding"); 

    var sidingR = d3.svg.path() 
    .attr("d", "M100,0 v80 a10,10 0 1 10,10 h-20") 
    .attr("class", "siding"); 

    // Get the data 
    var data; 
    d3.json("APIsyntax.json", function(error, json) { 
    //if (error) return console.warn(error); 
    // Canvas 
    var svgContainer = d3.select("body") 
    .append("svg") 
    .attr("width", canvasWidth) 
    .attr("height", canvasHeight); 

    // tryout for option siding path 
    var L = svgContainer.append(sidingL); 
    var R = svgContainer.append(sidingR); 


    });  
    </script> 
</body> 
</html>

出典

2016-07-22 Greg

これを行う方法はいくつかあります（そのため、この質問は「広すぎます」）。しかし、あなたはあなたのコード内で行った方法に従って、これは問題です：あなたはd3.svg.path()を追加しようとしているが、これは動作しません

var L = svgContainer.append(sidingL);

します。あなたにできることは要素を作成し、関数の戻り値としてそれらを追加するための変数を使用している：

var L = svgContainer.append(function(){ return sidingL});

ここで小さなスニペットです：

var canvasWidth= 200; 
 
var canvasHeight=200; 
 

 
var sidingL = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
 
sidingL.setAttribute("d", "M50,0 v80 a10,10 0 0 10,10 h20"); 
 
sidingL.setAttribute("class", "siding"); 
 

 
var sidingR = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
 
sidingR.setAttribute("d", "M100,0 v80 a10,10 0 1 10,10 h-20"); 
 
sidingR.setAttribute("class", "siding"); 
 

 
var svgContainer = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", canvasWidth) 
 
    .attr("height", canvasHeight); 
 

 
var L = svgContainer.append(function(){ return sidingL}); 
 
var R = svgContainer.append(function(){ return sidingR});

.siding { 
 
    fill: none; 
 
    stroke: black; 
 
    stroke-width: 6px; 
 
    stroke-linecap: round; 
 
    stroke-linejoin: round; 
 
    }

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

D3方法

「reusa 「BLEが、上記のコードが何をやってのD3の道道短いです：

var paths = ["M50,0 v80 a10,10 0 0 10,10 h20", 
 
\t "M100,0 v80 a10,10 0 1 10,10 h-20"]; 
 
    
 
var svg = d3.select("body") 
 
\t .append("svg") 
 
    .attr("width", 300) 
 
    .attr("height", 300); 
 
    
 
var myPaths = svg.selectAll("path") 
 
\t .data(paths) 
 
    .enter() 
 
    .append("path") 
 
    .attr("class", "siding"); 
 
    
 
myPaths.attr("d", function(d){ return d});

.siding { 
 
    fill: none; 
 
    stroke: black; 
 
    stroke-width: 6px; 
 
    stroke-linecap: round; 
 
    stroke-linejoin: round; 
 
    };

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

私達はちょうど変数（この場合はvar paths）でpathsを保存し、それらを使用しますパスにはdataと入力します。

出典

2016-07-23 02:57:37

再利用可能なsvgエンティティを作成するために必要なd3構造体は何ですか

答えて

関連する問題