Как маркировать каждый столбец на сгруппированной гистограмме? - PullRequest
Новая
       6

Как маркировать каждый столбец на сгруппированной гистограмме?

2 голосов
/ 24 марта 2020

Я новичок ie с D3. js, и я создал сгруппированную гистограмму. И я хотел бы поставить значение в верхней части бара echa. Но я не могу это сделать :(

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

Вы можете найти весь код моей разработки здесь:

Edit MultipleBarChart

Функция создания всех баров: 

  setBars(canvas, data, scales, keys, colors) {
    let height = HEIGHT - OFFSET_TOP - OFFSET_BOTTOM;

  let bar = canvas
  .append("g")
  .selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function(d) {
    return "translate(" + scales.x0Scale(d.shoot) + ",0)";
  })
  .selectAll("rect")
  .data(function(d) {
    return keys.map(function(key) {
      return { key: key, value: d[key] };
    });
  })
  .enter()
  .append("rect")
  .attr("class", "rect")
  .attr("x", function(d) {
    return scales.x1Scale(d.key);
  })
  .attr("y", function(d) {
    return scales.yScale(d.value);
  })
  .attr("width", scales.x1Scale.bandwidth())
  .attr("height", function(d) {
    return height - scales.yScale(d.value);
  })
  .attr("fill", function(d) {
    return colors(d.key);
  });
//set label over bar
bar
  .selectAll("g")
  .data(function(d) {
    return d.value;
  })
  .enter()
  .append("text")
  .attr("class", "bar-text")
  .attr("fill", "#000")
  .attr("text-anchor", "middle")
  .text(function(d) {
    console.log("d.value: " + d.value);
    return d.value;
  })
  .attr("x", function(d, i) {
    return scales.x1Scale.bandwidth() * (i + 0.5);
  })
  .attr("y", function(d, i) {
    return scales.yScale(d.value) + 8;
  });

}

Что я делаю не так

1 Ответ

1 голос
/ 24 марта 2020

Если вы посмотрите на цепочку в вашем bar выделении, вы увидите, что вы пытаетесь добавить текстовые элементы к канатам: bar - это выбор прямоугольников, а не выбор групп. Конечно, добавление текстов к прямоугольникам не будет работать в SVG.

Решение нарушает этот выбор. Например: 

//This is the group selection:
let bar = canvas
  .append("g")
  .selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function(d) {
    return "translate(" + scales.x0Scale(d.shoot) + ",0)";
  });

//Here, you append rects to the groups:
bar.selectAll("rect")
  .data(function(d) {
    return keys.map(function(key) {
      return {
        key: key,
        value: d[key]
      };
    });
  })
  .enter()
  .append("rect")
  //etc...

//Finally, here, you append texts to the groups:
bar.selectAll("text")
  .data(function(d) {
    return keys.map(function(key) {
      return {
        key: key,
        value: d[key]
      };
    });
  })
  .enter()
  .append("text")
  //etc...

Как видите, вам также придется изменить метод data().

...