D3グラフの周りに枠を作成する

Question

D3の旅を始めたばかりで、グラフの周りに1pxの小さな枠線を作成する方法について質問したいと思っていました。

変数 "border"と "bordercolor"を作成してから、自分のコードのvar svg = d3.select（ "body"）部分に.attr（ "border"、border）を追加しました。それはクラッシュしないが、私は国境もない。

私はこの境界をどのように追加するのでしょうか、誰かが私がしたことがなぜ間違っているのか説明できるかどうかということです。

<script type="text/javascript"> 
    //Width and height 
    var w = 800; 
    var h = 400; 
    var padding = 20; 
    var border=1; 
    var bordercolor='black'; 

    var dataset = [ 
        [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[-50,-100],[50,-45], 
        [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],[-480, 90], [3,-90] 
        ]; 

     // create scale functions 
     var xScale = d3.scale.linear() 
         .domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[0]; })]) 
         .range([padding, w - padding * 2]); 

    var yScale = d3.scale.linear() 
         .domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[1]; })]) 
         .range([h - padding, padding]); 

     var rScale = d3.scale.linear() 
     .domain( [-100,  d3.max(dataset, function(d) { return d[1];   })] ) 
     .range([2,5]); 

    //Create SVG element 
    var svg = d3.select("body") 
       .append("svg") 
       .attr("width", w) 
       .attr("height", h) 
       .attr("border",border) 
       ; 

    svg.selectAll("circle") 
     .data(dataset) 
     .enter() 
     .append("circle") 
     .attr("cx", function(d) { 
      return xScale(d[0]); 
     }) 
     .attr("cy", function(d) { 
      return yScale(d[1]); 
     }) 
     .attr("r", 3); 

    svg.selectAll("text") 
    .data(dataset) 
    .enter() 
    .append("text") 
    .text(function(d) { 
     return d[0] + "," + d[1]; 
    }) 
    .attr("x", function(d) { 
     return xScale(d[0]); 
    }) 
    .attr("y", function(d) { 
     return yScale(d[1]); 
    }) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "11px") 
    .attr("fill", "red"); 
</script> 

Answer 1

svg varは単なるコンテナです。コンテナにパスまたは要素を追加し、境界線に必要な線の色と幅を与える必要があります。これを行う方法は複数あります。 In this gist私は、次の値でRECTを追加することによって、それをやった：

var borderPath = svg.append("rect") 
    .attr("x", 0) 
    .attr("y", 0) 
    .attr("height", h) 
    .attr("width", w) 
    .style("stroke", bordercolor) 
    .style("fill", "none") 
    .style("stroke-width", border); 

Answer 2

は、SVGの周りにアウトラインを配置するためにstyle属性を使用します。

//Create SVG element 
    var svg = d3.select("body") 
      .append("svg") 
      .attr("style", "outline: thin solid red;") //This will do the job 
      .attr("width", w) 
      .attr("height", h); 

Answer 3

は、単にCSSを使用します。

svg { 
    border:1px solid black; 
} 

Answer 4

IMHO分離したままにするのが良いです形からの形式指示：

.append("rect") 
.attr("x", 5) 
.attr("y", 5) 
.attr("height", 40) 
.attr("width", 50) 
.attr("class","foo") 
... 

CSS：

代替はそれらの直接のストロークを使用して、私の場合はボーダー