D3.js 在D3图形周围创建边框

所以我刚刚开始我的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>

//宽度和高度
var w=800；
var h=400；
var=20；
var-border=1；
var bordercolor='black'；
变量数据集=[
[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]
];
//创建比例函数
var xScale=d3.scale.linear（）
.domain（[d3.min（数据集，函数（d）{返回d[0]；}），d3.max（数据集，函数（d）{返回d[0]；}）]）
.范围（[填充，w-填充*2]）；
var yScale=d3.scale.linear（）
.domain（[d3.min（数据集，函数（d）{返回d[0]；}），d3.max（数据集，函数（d）{返回d[1]；}）]）
.范围（[h-填充，填充]）；
var rScale=d3.scale.linear（）
.domain（[-100，d3.max（数据集，函数（d）{返回d[1]；}）]）
.范围（[2,5]）；
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
.attr（“边界”，边界）
;
svg.selectAll（“圆圈”）
.数据（数据集）
.输入（）
.附加（“圆圈”）
.attr（“cx”，功能（d）{
返回xScale（d[0]）；
})
.attr（“cy”，函数（d）{
返回yScale（d[1]）；
})
.attr（“r”，3）；
svg.selectAll（“文本”）
.数据（数据集）
.输入（）
.append（“文本”）
.文本（功能（d）{
返回d[0]+“，”+d[1]；
})
.attr（“x”，函数（d）{
返回xScale（d[0]）；
})
.attr（“y”，函数（d）{
返回yScale（d[1]）；
})
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“11px”）
.attr（“填充”、“红色”）；

svg变量只是一个容器。您需要向容器中添加路径或元素，然后为其指定所需的边框笔划颜色和宽度。实现这一点的方法不止一种。为此，我添加了一个具有以下值的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);

---

使用“样式”属性在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);

只需使用css：

svg {
  border:1px solid black;
}

---

IMHO最好将形状与样式说明分开：

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

CSS:

---

如果使用X轴和Y轴，另一个选项是使用ticksizeout（） 例如：

---

另一种方法是使用css来绘制边框。在我的例子中，直接使用css，笔划应用于所有元素，但不应用于边框。我不得不使用K.K.的解决方案。但是在css文件中而不是直接在javascript代码中执行，最好将样式和属性分开。或者至少使用这个答案中的.style。这在who SVG周围添加了一个边框，这不是一回事。我支持这个解决方案，但我可能建议的一个改进是让解决方案包含样式定义。这在某些情况下更容易处理/在其他情况下更难处理。svg.append（“rect”）.attr（“x”，0）.attr（“y”，0）.attr（“width”，width）.attr（“height”，height）.attr（“fill”，“none”）.attr（“stroke”，“bdbdbdbd”）.attr（“stroke width”，4）；

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

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