Как выровнять элемент svg в d3 - PullRequest
Новая
       43

Как выровнять элемент svg в d3

0 голосов
/ 27 мая 2020

Я хочу выровнять круг на изображении ниже вправо (кончик полосы):

enter image description here

Изменить:

x-axis is showing correct in the console.log but not getting rendered as per the coordinates. It's taking the last x coortdinate value for all bars.

g.selectAll("pattern")
  .data(data)
  .enter()
  .append("pattern")
  .attr("id", "img")
  .attr("height", "100%")
  .attr("width", "100%")
  .attr("patternContentUnits", "userSpaceOnUse")
  .append("rect")
  .attr("class", "pattern-rect")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "steelblue");

g.selectAll("pattern")
  .data(data)
  .append("circle")
  .attr("class", "pattern-circle")
  .style("overflow", "visible")
  .attr("r", yScale.bandwidth() / 2.2)
  .attr("cx", (d) => xScale(d.Population) - yScale.bandwidth() / 2)
  .attr("cy", yScale.bandwidth() / 2);

console.log(xScale.range());

g.selectAll(".bar")
  .data(data)
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("y", (d) => yScale(yValue(d)))
  .attr("width", (d) => xScale(xValue(d)))
  .attr("height", yScale.bandwidth())
  .attr("fill", "url(#img)");

Edit 2:

Я понял, что, поскольку мой код генерирует несколько шаблонов, но первый шаблон применяется ко всем столбцам . Как я могу динамически применять шаблоны в этом случае?

...