[D3] Creating SVG Elements from Data

var myData = [1, 2, 3, 4, 5];
var svgViewport = d3.select("body").append("svg").attr("width", "400").attr("height", "400");
var circleSelection = svgViewport.selectAll("circle").data(myData);
var circleElements = circleSelection.enter().append("circle");

// ex1:
function myFunction(){ return 25; };
circleElements.attr("cx", myFunction).attr("cy", myFunction).attr("r", myFunction);

// ex2:
function functionTwo(d, i){ return d * 25; };
circleElements.attr("cx", functionTwo).attr("cy", functionTwo).attr("r", functionTwo);

// ex3:
circleElements.attr("cx", functionTwo).attr("cy", functionTwo).attr("r", 25);

// 增加 style
function greenRed(d, i){
  if(i % 2 === 0){ return "green"; }
  else { return "red"; }
}
var circleStyle = circleElements.style("fill", greenRed);

您可在此處留言

avatar

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

  Subscribe  
Notify of