d3js set background color when using d3.zoom()

Question

I'm trying to draw some images on background with some color, howewer this method don't work as expected when I zoom out (some part of screen on borders become white). So what is proper method to set background color?

Here is the code:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>

    var svg = d3.select("body")
      .append("svg")
      .attr("width", "100%")
      .attr("height", "100%")
      .call(d3.zoom().on("zoom", function () {
              svg.attr("transform", d3.event.transform)
      }))
      .append("g")

    svg.append("rect")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("fill", "pink");

    svg.append("image")
        .attr("xlink:href", "./image/" + "item_1" + ".png")
        .attr("x", document.body.clientWidth / 2)
        .attr("y", document.body.clientHeight / 2)
        .attr("width", 32)
        .attr("height", 32)

    svg.append("image")
        .attr("xlink:href", "./image/" + "item_2" + ".png")
        .attr("x", 3 * document.body.clientWidth / 4)
        .attr("y", 3 * document.body.clientHeight / 4)
        .attr("width", 32)
        .attr("height", 32)

  </script>
</body>

Update: Looks like adding background-color fixed the problem:

...
  </style>
</head>

<style>
   body{
    background-color: #E59400;
   } 
</style>

<body>
  <script>
...

I'm not following your question... why don't you actually **set** the background color? https://jsfiddle.net/kvhqyh6s/ — Gerardo Furtado, Jan 15 '18 at 10:07
The question you linked to is about standalone (exported) SVGs contrary to yours which is embedded in HTML. Since `background-color` is not a standard attribute, most sources recommend using a `` instead, like you tried. However, support for `background-color` on the root ` — altocumulus, Jan 15 '18 at 11:07
@altocumulus I never found a browser where `background-color` failed. Do you know any one? — Gerardo Furtado, Jan 15 '18 at 11:12
@GerardoFurtado No, *...seems to be supported by all major browsers nowadays...* would be better. I just wanted to add some context as I found your comment rather blunt addressing someone having good intentions. Using a `` like OP did really is the standard procedure for setting a background color on any SVG element except the root element (well, even there). And, even on the root it only works when not standalone. No harm meant, just wanted to clarify. — altocumulus, Jan 15 '18 at 11:31
@altocumulus at the end, the solution OP used was completely unrelated. Oh, sweet world of XY problems... — Gerardo Furtado, Jan 15 '18 at 12:08

score -1 · Answer 1 · answered Jan 15 '18 at 10:11

<!DOCTYPE html>
   <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>

var svg = d3.select("body")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%").style("background-color", "pink")
  .call(d3.zoom().on("zoom", function () {
          svg.attr("transform", d3.event.transform)
  }))
  .append("g")

svg.append("rect")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", "pink")
    ;

svg.append("image")
    .attr("xlink:href", "./image/" + "item_1" + ".png")
    .attr("x", document.body.clientWidth / 2)
    .attr("y", document.body.clientHeight / 2)
    .attr("width", 32)
    .attr("height", 32)

svg.append("image")
    .attr("xlink:href", "./image/" + "item_2" + ".png")
    .attr("x", 3 * document.body.clientWidth / 4)
    .attr("y", 3 * document.body.clientHeight / 4)
    .attr("width", 32)
    .attr("height", 32)

  </script>
</body>

d3js set background color when using d3.zoom()

1 Answers1