主页 / 问题 / 1029628
Accepted
spoon 100500
Asked:2020-09-30 21:09:21 +0000 UTC2020-09-30 21:09:21 +0000 UTC

更改特定元素的文本标记的文本（this）d3.js

  • 772

“拖动”时，我无法将文本分配给特定元素，即 这不起作用，它会立即更改所有元素。

const svg = d3.select('body').append('svg')
  .attr('width', 800)
  .attr('height', 400);

const barHeight = 400,
  padding = 1,
  dataSet = [];


for (let i = 0; i < 20; i++) {
  dataSet.push(i)
}


let bars = svg.selectAll('g')
  .data(dataSet)
  .enter()
  .append('g')
  .append('rect')
  .classed('plot-bar', true)
  .attr('y', 0)
  .attr('x', (d, i) => i * 30)
  .attr('width', 30 - padding)
  .attr('height', barHeight);

let text = svg.selectAll("g")
  .append('text')
  .attr("x", (d, i) => i * 30)
  .attr("y", 15)
  .text(400);

let dragg = d3.drag()
  .on('drag', () => {
    let x = d3.event.sourceEvent.x;
    bars.each(function() {
      let r = this.getBoundingClientRect();
      r.x < x && r.width + r.x > x ? d3.select(this).attr('height', d3.event.sourceEvent.y) : false;
    })
    text.text(d3.event.sourceEvent.y);
  })

svg.call(dragg);
.bar {
  fill: steelblue;
}

.plot {
  border: 2px solid #789;
  background-color: burlywood;
}

.plot-bar {
  fill: teal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

svg

2 个回答

  1. Best Answer

    您可以为文本标签分配一个类，并通过它搜索它们：

    const svg = d3.select('body').append('svg')
  .attr('width', 600)
  .attr('height', 400);

const barHeight = 400,
  padding = 1,
  dataSet = [];

for (let i = 0; i < 20; i++) {
  dataSet.push(400)
}

let bars = svg.selectAll('g')
  .data(dataSet)
  .enter()
  .append('g')
  .append('rect')
  .classed('plot-bar', true)
  .attr('y', 0)
  .attr('x', (d, i) => i * 30)
  .attr('width', 30 - padding)
  .attr('height', barHeight);

let text = svg.selectAll("g")
  .append('text')
  .attr("x", (d, i) => i * 30)
  .attr("class", (d, i) => `text${i}`)
  .attr("y", 15)
  .text(2500);

let dragg = () => {
  let x = d3.event.sourceEvent.x;
  bars.each(function(d, i) {
    let r = this.getBoundingClientRect();
    if (r.x < x && r.width + r.x > x) {
      let y = Math.max(0, Math.min(d3.event.sourceEvent.y - r.y, 400));
      d3.select(this).datum(y);
      d3.select(this).attr('height', y);
    };
  })
  recalc(); 
};

svg.call(d3.drag().on('start', dragg).on('drag', dragg));
  
function recalc() {
  bars.each((d, i) => d3.select(`.text${i}`).text((d/400*(+height.value)).toFixed()));
}
    .plot-bar {
  fill: teal;
}

svg {
  background-color: burlywood;
}

text {
  font-size:14px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<input value=2500 id=height onkeyup=recalc() /><hr>

    • 3 
  2. <script>
  const svg = d3.select('body').append('svg')
    .attr('width', 800)
    .attr('height', 400);

  const barHeight = 800,
    padding = 1,
    dataSet = [];


  for (let i = 0; i < 20; i++) {
    dataSet.push(i)
  }

  let bars = svg.selectAll('g')
    .data(dataSet)
    .enter()
    .append('g')
    .append('rect')
    .classed('plot-bar', true)
    .attr('y', 0)
    .attr('x', (d, i) => i * 30)
    .attr('width', 30 - padding)
    .attr('height', barHeight);

  let text = svg.selectAll("g")
    .append('text')
    .attr("x", (d, i) => i * 30)
    .attr("y", 15)
    .text(400);

  let dragg = d3.drag()
    .on('drag', () => {
      let x = d3.event.sourceEvent.x;
      let y = d3.event.sourceEvent.y;
      bars.each(function(i) {
        let r = this.getBoundingClientRect();
        if (r.x < x && r.width + r.x > x) {
          d3.select(this).attr('height', y);
          this.nextSibling.innerHTML = y;
        }
      })
    });

  svg.call(dragg);

</script>
    • 2

相关问题