d3

Layout Cluster

30 May 2014

fill属性

/**
  ApplicationViewModel (knockout)
**/
function AppViewModel() {
  var width = 960,
      height = 700;
  
  // クラスター レイアウト生成
  var cluster = d3.layout.cluster()
      .size([height, width - 160]);
  
  // 連結線の生成
  var diagonal = d3.svg.diagonal()
      .projection(function(d) { return [d.y, d.x]; });
  
  // svg生成
  var svg = d3.select("#ins01").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(50,0)");

  // fill 属性 選択項目
  fillAttr = ['green', 'orange', 'none'];
  selectedFillAttr = ko.observable('green');
  
  // 初期描画
  drawCluster();
  
  /*************************************
    click event 
  **************************************/
  // 
  self.draw = function() {
    svg.selectAll(".link").remove();
    svg.selectAll(".node").remove();
    svg.selectAll("g").remove();
    
    drawCluster();

  };
  //** 描画ルーチン ** //
  function drawCluster(){
    d3.json("/assets/json/mise.json", function(error, root) {
      
      var nodes = cluster.nodes(root),
          links = cluster.links(nodes);

      // 連結線の描画      
      var link = svg.selectAll(".link")
          .data(links)
        .enter().append("path")
          .attr("stroke","white") // line color
          .attr("stroke-width", 3) // line width
         .style("fill",function(){return selectedFillAttr();}) // <<<<
          .attr("class", "link")
          .attr("d", diagonal);

      // ノードの描画
      var node = svg.selectAll(".node")
          .data(nodes)
        .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
      // ノードに円を描画    
      node.append("circle")
          .attr("r", function(d){return (10 - d.depth * 2) < 4 ? 4 : (10 - d.depth * 2);})
          .attr("stroke","red")
          .attr("stroke-width", function(d){ return (3 - d.depth)===0 ? 1 : (3 - d.depth) })
          .style("fill","lime");
      // ノードにテキストを描画    
      node.append("text")
          .attr("dx", function(d) { return d.children ? -8 : 8; })
          .attr("dy", 3)
          .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
          .text(function(d) { return d.name; })
          .style("fill","yellow");
  });

};

};

// Activates knockout.js
ko.applyBindings(new AppViewModel());