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

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

使用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 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

If X and Y Axis are used, other option is to use tickSizeOuter() Example:

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

在D3图表周围创建边框

5 个答案: