[D3] D3 and SVG Paths

D3 and Basic SVG Line Shapes

  • polyline

    <polyline stroke="blue" stroke-width="2" points="05,30 15,30 15,20
                                                     25,20 25,10 35,10" />
  • polygon

    <polygon fill="yellow" stroke="blue" stroke-width="2" points="05,30 15,10 25,30" />

範例:

myData = [{"x": 05, "y": 30}, {"x": 15, "y": 30},
          {"x": 15, "y": 20}, {"x": 25, "y": 20},
          {"x": 25, "y": 10}, {"x": 35, "y": 10}];

d3.selection.attr("points", ...);

SVG Path

<rect x="0" y="0" width="50" height="50" />
等同於:
<path d="M0,0 50,0 50,50 0,50" />

<line x1="5" y1="5" x2="40" y2="40" stroke="gray" stroke-width="5" />
等同於:
<path d="M5,5 40,40" stroke="gray" stroke-width="5" />

<circle cx="100" cy="100" r="75" />
等同於:
<path d="M 100,100
         m -75,0
         a 75,75 0 1,0 150,0
         a 75,75 0 1,0 -150,0" />

D3 Path Data Generator

myData = [{"x": 05, "y": 30}, {"x": 15, "y": 30},
          {"x": 15, "y": 20}, {"x": 25, "y": 20},
          {"x": 25, "y": 10}, {"x": 35, "y": 10}];

var lineFunction = d3.svg.line()
                         .x(function(d){ return d.x; })
                         .y(function(d){ return d.y; })
                         .interpolate("linear");

svgViewport = d3.select("body").append("svg").attr("width", "200").attr("height", "200");

svgViewport.append("path").datum(myData).attr("d", lineFunction).attr("stroke", "blue").attr("stroke-width", 2).attr("fill", "none");

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of