Question

我想在直线上制作动画，但是第二条线将从两个部分绘制，一个从开始绘制，另一个从接近倒数第二个点开始消失，所以我得到了这样的结果

我正在关注别人的代码

 const pathLength = path.node().getTotalLength();
      const transitionPath = d3.transition().ease(d3.easeQuad).duration(3000);
      path
        .attrs({
          "stroke-dashoffset": pathLength,
          "stroke-dasharray": pathLength,
        })
        .transition(transitionPath)
        .attr("stroke-dashoffset", 0);

如果您需要所有代码，我可以粘贴，但实际上这只是动画的这一部分，谢谢！

Answer 1

我认为您不小心使用了相同的路径长度两次-即第一条路径。即使选择中有多个节点，path.node()也会返回第一个节点。

const data = [{
  category: "series_1",
  values: [{
      name: "A",
      value: 10
    },
    {
      name: "B",
      value: 21
    },
    {
      name: "C",
      value: 19
    },
    {
      name: "D",
      value: 23
    },
    {
      name: "E",
      value: 20
    },
  ],
}, ];
let counter = 1;
const add_set = (arr) => {
  let copy = JSON.parse(JSON.stringify(arr[0]));
  const random = () => Math.floor(Math.random() * 20 + 1);
  const add = (arr) => {
    counter++;
    copy.values.map((i) => (i.value = random()));
    copy.category = `series_${counter}`;
    arr.push(copy);
  };
  add(arr);
};
add_set(data);

//No.1 define the svg
let graphWidth = 600,
  graphHeight = 300;
let margin = {
  top: 60,
  right: 10,
  bottom: 30,
  left: 45
};
let totalWidth = graphWidth + margin.left + margin.right,
  totalHeight = graphHeight + margin.top + margin.bottom;
let svg = d3
  .select("body")
  .append("svg")
  .attr("width", totalWidth)
  .attr("height", totalHeight);
//No.2 define mainGraph
let mainGraph = svg
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//No.3 define axises
let categoriesNames = data[0].values.map((d) => d.name);
let xScale = d3
  .scalePoint()
  .domain(categoriesNames)
  .range([0, graphWidth]); // scalepoint make the axis starts with value compared with scaleBand
let colorScale = d3.scaleOrdinal(d3.schemeCategory10);
colorScale.domain(data.map((d) => d.category));

let yScale = d3
  .scaleLinear()
  .range([graphHeight, 0])
  .domain([
    d3.min(data, (i) => d3.min(i.values, (x) => x.value)),
    d3.max(data, (i) => d3.max(i.values, (x) => x.value)),
  ]); //* If an arrow function is simply returning a single line of code, you can omit the statement brackets and the return keyword

//No.4 set axises
mainGraph
  .append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + graphHeight + ")")
  .call(d3.axisBottom(xScale));
mainGraph.append("g").attr("class", "y axis").call(d3.axisLeft(yScale));
//No.5 make lines
let lineGenerator = d3
  .line()
  .x((d) => xScale(d.name))
  .y((d) => yScale(d.value))
  .curve(d3.curveMonotoneX);

var lines = mainGraph
  .selectAll(".path")
  .data(data.map((i) => i.values))
  .enter()
  .append("path")
  .attr("d", lineGenerator)
  .attr("fill", "none")
  .attr("stroke-width", 3)
  .attr("stroke", (d, i) => colorScale(i));

//No.6 append circles
let circleData = data.map((i) => i.values);
mainGraph
  .selectAll(".circle-container")
  .data(circleData)
  .enter()
  .append("g")
  .attr("class", "circle-container")
  .attr("fill", (d, i) => console.log(d) || colorScale(i))
  .selectAll("circle")
  .data((d) => d)
  .enter()
  .append("circle")
  .attrs({
    cx: (d) => xScale(d.name),
    cy: (d) => yScale(d.value),
    r: 3,
    opacity: 1,
  });

// HERE we let the lines grow
lines
  .attr("stroke-dasharray", function(d) {
    // Get the path length of the current element
    const pathLength = this.getTotalLength();
    return `0 ${pathLength}`
  })
  .transition()
  .duration(2500)
  .attr("stroke-dasharray", function(d) {
    // Get the path length of the current element
    const pathLength = this.getTotalLength();
    return `${pathLength} ${pathLength}`
  });

.line {
  stroke: blue;
  fill: none;
}

<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

d3为多条线设置动画，这条线无法完成

1 个答案: