d3js устанавливает цвет фона при использовании d3.zoom ()

Question

d3js устанавливает цвет фона при использовании d3.zoom ()

1

Я пытаюсь сделать некоторые изображения на фоне с каким-то цветом, howewer этот метод не работает должным образом, когда я уменьшаю масштаб (часть экрана на границах становится белой). Итак, что такое правильный метод для установки цвета фона?

Вот код:

<!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>

Обновление: похоже, добавление background-color устраняет проблему:

...
  </style>
</head>

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

<body>
  <script>
...

mrgloom 15 янв. 2018, в 10:56

Источник

0

Я не слежу за вашим вопросом ... почему бы вам не установить цвет фона? jsfiddle.net/kvhqyh6s
Gerardo Furtado 15 янв. 2018, в 10:07
0

Вопрос, на который вы ссылаетесь, касается автономных (экспортируемых) SVG, отличных от ваших, встроенных в HTML. Поскольку background-color не является стандартным атрибутом, большинство источников рекомендуют использовать вместо него <rect> , как вы пытались. Однако поддержка background-color для корневого элемента <svg> , по-видимому, относительно широко распространена среди браузеров (например, см. «Цвет фона по умолчанию корневого элемента SVG» ), поэтому в вашем случае предложение, сделанное @Gerardo, выглядит хорошим выбором. ,
altocumulus 15 янв. 2018, в 11:07
0

@altocumulus Я так и не нашел браузер, в котором background-color не удался. Вы знаете кого-либо?
Gerardo Furtado 15 янв. 2018, в 11:12
0

@GerardoFurtado Нет, ... кажется, поддерживается в настоящее время всеми основными браузерами ... было бы лучше. Я просто хотел добавить некоторый контекст, так как я нашел ваш комментарий довольно грубым в отношении кого-то, имеющего добрые намерения. Использование <rect> подобного OP, действительно является стандартной процедурой для установки цвета фона любого SVG-элемента, кроме корневого (ну, даже там). И даже на руте работает только когда не автономно. Никакого вреда не имелось, просто хотел уточнить.
altocumulus 15 янв. 2018, в 11:31
0

@altocumulus, в конце концов, используемое решение OP было совершенно не связано. О, сладкий мир проблем XY ...
Gerardo Furtado 15 янв. 2018, в 12:08

Показать ещё 3 комментария

Теги:

javascript

d3.js

css

background-color

1 ответ

Ещё вопросы

Я не слежу за вашим вопросом ... почему бы вам не установить цвет фона? jsfiddle.net/kvhqyh6s
Вопрос, на который вы ссылаетесь, касается автономных (экспортируемых) SVG, отличных от ваших, встроенных в HTML. Поскольку background-color не является стандартным атрибутом, большинство источников рекомендуют использовать вместо него <rect> , как вы пытались. Однако поддержка background-color для корневого элемента <svg> , по-видимому, относительно широко распространена среди браузеров (например, см. «Цвет фона по умолчанию корневого элемента SVG» ), поэтому в вашем случае предложение, сделанное @Gerardo, выглядит хорошим выбором. ,
@altocumulus Я так и не нашел браузер, в котором background-color не удался. Вы знаете кого-либо?
@GerardoFurtado Нет, ... кажется, поддерживается в настоящее время всеми основными браузерами ... было бы лучше. Я просто хотел добавить некоторый контекст, так как я нашел ваш комментарий довольно грубым в отношении кого-то, имеющего добрые намерения. Использование <rect> подобного OP, действительно является стандартной процедурой для установки цвета фона любого SVG-элемента, кроме корневого (ну, даже там). И даже на руте работает только когда не автономно. Никакого вреда не имелось, просто хотел уточнить.
@altocumulus, в конце концов, используемое решение OP было совершенно не связано. О, сладкий мир проблем XY ...

MrSmithGoesToWashington · Answer 1 · 2018-01-15T08-20-00.000Z

<!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>