Question

我有滑动条显示我试图制作动画。基本上，水平地彼此相邻有两个条，每个条占总宽度的百分比。随着数字的变化，宽度和x位置将生成有效的反映新百分比。

它工作正常，只是当项目首次加载时我不想要动画，只有在数字改变时才需要动画。现在，它从项目的左侧射入到位。

edit2：这是代码段中的第一个版本：

＆＃13;

const d3SlidingBar = {};
//  data should simply be an array with two numbers
//  future: add support for arbitrary number of numbers
d3SlidingBar.create = function create(el, data, formatText) {
  const svg = d3.select(el).append('svg')
    .attr('class', 'sliding-bar__svg')
    .attr('width', '100%')
    .attr('height', '100%');

  svg.append('g')
    .attr('class', 'sliding-bar__svg__bars')
  //  try 100% here. Should work.
    .attr('width', el.offsetWidth)
    .attr('height', el.offsetHeight);

  if (data) this.update(el, data, formatText);
};

d3SlidingBar.update = function update(el, data, formatText) {
  // Re-compute the scales, and render the data points
  const scales = this.scale(el, data);
  this.drawBars(el, scales, data);
  this.drawNumbers(el, scales, data, formatText);
};

d3SlidingBar.scale = (el, data) =>
  d3.scaleLinear()
  .range([0, el.offsetWidth])
  .domain([0, data.reduce((a, b) => a + b)]);


d3SlidingBar.drawBars = (el, scale, data) => {
  const t = d3.transition()
    .duration(450);

  const barHeight = el.offsetHeight;

  //  keep track of right side of stacks of bar so bars can stack further.
  //  Useful if we have more than two bars.
  let greatestWidth = 0;

  const g = d3.select(el).selectAll('.sliding-bar__svg__bars');

  const bar = g.selectAll('.sliding-bar__svg__bar')
    .data(data);

  bar.enter().append('rect')
    .attr('class', (point, ind) => `sliding-bar__svg__bar sliding-bar__svg__bar--${ind}`)
    .attr('height', barHeight)
    .merge(bar)
    .transition(t)
    .attr('width', point => scale(point))
    .attr('x', (point) => {
      const oldGreatestWidth = greatestWidth;
      greatestWidth += scale(point);
      return oldGreatestWidth;
    });

  bar.exit().remove();
};

//  This function needs an overhaul, but I'm not sure how
d3SlidingBar.drawNumbers = (el, scale, data, formatText = point => point) => {
  const barHeight = el.offsetHeight;

  //  keep track of right side of stacks of bar so bars can stack further.
  //  Bar position is used to position text

  const g = d3.select(el).selectAll('.sliding-bar__svg__bars');

  const number = g.selectAll('.sliding-bar__svg__number')
    .data(data);

  number.enter().append('text')
    .style('font-size', barHeight - 10)
    .attr('y', barHeight - 10)
    .attr('class', (point, ind) => `sliding-bar__svg__number sliding-bar__svg__number--${ind}`)
    .merge(number)
    .attr('y', barHeight - 10)
    .style('font-size', barHeight - 10)
    .text(point => formatText(point))
    .attr('x', function xPosition(point, ind) {
      return (ind % 2) ?
        el.offsetWidth - this.getComputedTextLength() - 8
        : (0 + 8);
    });

  // This is for if we want the number to stay at the left of each bar,
  // const greatestWidth = 0;
  //
  //  ...number.enter...
  //
  // useful for more than 2 bars.
  // .attr('x', (point, ind) => {
  //   const oldGreatestWidth = greatestWidth;
  //   greatestWidth += scale(point);
  //   return oldGreatestWidth + 5;
  // })
  //

  number.exit().remove();
};


let count = 0;
const data = [[50, 50], [75,25]];
const formatText = text => `%${text}`;

const bars = document.getElementById('bars')

d3SlidingBar.create(bars, data[0], formatText)

setInterval(() => {
  count++;
  d3SlidingBar.update(bars, data[count % 2], formatText)
}, 1000)

＆＃13;

.sliding-bar__container {
  width: 400px;
  height: 50px;
  border: 2px solid black;
  background-color: black;
  position: absolute;
  display: inline-block;
}

.sliding-bar__svg__bars {
  height: 100%;
  width: 100%;
}

.sliding-bar__svg__bar--0 {
  fill: #33708E;
}

.sliding-bar__svg__bar--1 {
  fill: #CF8D3A;
}

.sliding-bar__svg__number {
  fill: white;
  font-weight: bold;
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

<body>
  <div class="sliding-bar__container" id='bars'>
  </div>
</body>

＆＃13;

编辑：我尝试将其更改为此，但现在每次更新时，条形图从右侧开始......

d3SlidingBar.drawBars = (el, scale, data) => {
  const t = d3.transition()
    .duration(450);

  const barHeight = el.offsetHeight;

  //  keep track of right side of stacks of bar so bars can stack further.
  //  Useful if we have more than two bars.
  let greatestWidth = 0;
  let greatestWidthEnter = 0;

  const g = d3.select(el).selectAll('.sliding-bar__svg__bars');

  const bar = g.selectAll('.sliding-bar__svg__bar')
    .data(data);

  bar.transition(t)
    .attr('width', point => scale(point))
    .attr('x', (point) => {
      const oldGreatestWidth = greatestWidth;
      greatestWidth += scale(point);
      return oldGreatestWidth;
    });


  bar.enter().append('rect')
    .attr('class', (point, ind) => `sliding-bar__svg__bar sliding-bar__svg__bar--${ind}`)
    .attr('height', barHeight)
    .merge(bar)
    .attr('width', point => scale(point))
    .attr('x', (point) => {
      const oldGreatestWidth = greatestWidthEnter;
      greatestWidthEnter += scale(point);
      return oldGreatestWidth;
    });

  bar.exit().remove();
};

Answer 1

好的，我明白了。

  bar
    .transition(t)
    .attr('width', point => scale(point))
    .attr('x', (point) => {
        const oldGreatestWidth = greatestWidth;
        greatestWidth += scale(point);
        return oldGreatestWidth;
    });




bar.enter().append('rect')
    .attr('class', (point, ind) => `sliding-bar__svg__bar sliding-bar__svg__bar--${ind}`)
    .attr('height', barHeight)
    .attr('width', point => scale(point))
    .attr('x', (point) => {
      const oldGreatestWidth = greatestWidth;
      greatestWidth += scale(point);
      return oldGreatestWidth;
    });

基本上，这是我的第二次尝试，但删除了合并（条）线。我不确定merge（）会做什么，但它似乎对我所做的任何事情都没有必要。我认为只要我们使用更新模式就需要它，但没有它就可以正常工作。

我认为如果merge（bar）位于enter（）块的末尾，而不是在中间，它仍然有效。

d3js Don先动画进入动画

1 个答案: