Создание границы вокруг вашего графика 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>

Ответ 1

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);

Ответ 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);

Ответ 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;
}

Ответ 4

Просто используйте css:

svg {
  border:1px solid black;
}

Ответ 5

Если используются оси X и Y, другой вариант - использовать tickSizeOuter(). Пример:

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