d3.js - 在 D3 图表周围创建边框

Question

所以我刚刚开始了我的 D3 之旅，想问一下如何在图表周围创建一个 1px 的小边框。

我创建了变量“border”和“bordercolor”，然后将 .attr("border",border) 添加到代码的 var svg = d3.select("body") 部分。它不会崩溃，但我也没有边界。

我想问题是我如何添加这个边框，如果有人能解释为什么我做错了。

<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

使用 style 属性在 svg 周围放置轮廓：

    //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 2

svg var 只是一个容器。您需要向容器中添加路径或元素，然后为其提供您想要的边框颜色和宽度。有不止一种方法可以做到这一点。在这个要点中，我通过添加具有以下值的矩形来做到这一点：

 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 3

恕我直言，最好将形状与样式说明分开：

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

CSS：

svg rect.foo {
  fill: white;
  stroke-width: 0.5;
  stroke: grey;
}

Answer 4

只需使用 css：

svg {
  border:1px solid black;
}

Answer 5

如果使用 X 和 Y 轴，其他选项是使用 tickSizeOuter() 示例：

var yAxis = d3.axisLeft(y).ticks(5).tickSizeOuter(-width);
var xAxis = d3.axisBottom(x).ticks(5).tickSizeOuter(-height);