Легенда не появляется при использовании document.createElement ('canvas') - PullRequest
Новая
       76

Легенда не появляется при использовании document.createElement ('canvas')

1 голос
/ 28 февраля 2020

Я подписался на этот Наблюдаемый пост, чтобы легко создать легенду.

Поскольку строка 

DOM.canvas(1, n)

в ramp работает только на Observable, я заменил ее на 

document.createElement("canvas")

, а также изменил SVG, добавив в него к основному тегу div. Эти изменения не вызывают никаких ошибок, однако проблема в том, что легенда не отображается, даже если легенда SVG присутствует в необработанном HTML.

Вот ссылка на JSFiddle. Любое руководство будет с благодарностью.

1 Ответ

1 голос
/ 28 февраля 2020

Холст создается, это не проблема. Проблема заключается в том, что, поскольку вы пропускаете ширину и высоту в ... 

const canvas = DOM.canvas(n, 1);
//these are w & h --------^--^

..., вам нужно установить их самостоятельно. Например: 

d3.select(canvas).attr("width", n)
  .attr("height", 1);

Вот упрощенная версия этого JSFiddle, показывающая, что холст работает: 

legend({
  color: d3.scaleSequential([1, 10], d3.interpolateReds),
  title: "Title"
})


function legend({
  color,
  title,
  tickSize = 6,
  width = 320,
  height = 44 + tickSize,
  marginTop = 18,
  marginRight = 0,
  marginBottom = 16 + tickSize,
  marginLeft = 0,
  ticks = width / 64,
  tickFormat,
  tickValues
} = {}) {

  const svg = d3.select(".scatter").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .style("overflow", "visible")
    .style("display", "block");

  svg.append("image")
    .attr("x", marginLeft)
    .attr("y", marginTop)
    .attr("width", width - marginLeft - marginRight)
    .attr("height", height - marginTop - marginBottom)
    .attr("preserveAspectRatio", "none")
    .attr("xlink:href", ramp(color.interpolator()).toDataURL());

}

function ramp(color, n = 256) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext("2d");
  d3.select(canvas).attr("width", n)
    .attr("height", 1);
  for (let i = 0; i < n; ++i) {
    context.fillStyle = color(i / (n - 1));
    context.fillRect(i, 0, 1, 1);
  }
  return canvas;
}
<script type="text/javascript" src="https://d3js.org/d3.v5.js"></script>
<div class="scatter">
</div>

Кстати, нет такого элемента, как <legend-svg>.

PS: Это секунда вопрос от вас я отвечаю на эту тему. Поскольку вы новичок в JavaScript и D3, вот вам совет: не пытайтесь использовать этот наблюдаемый ноутбук, это слишком сложно для ваших целей. Просто создайте SVG, холст и ось c самостоятельно, с нуля, это будет намного проще.

...