Chcę dodać kręgi do SVG dla każdej ścieżki stworzonej przez gniazdo, aby koła prowadzą rysunek ścieżki. Podobny do To skrzypca, ale z zagnieżdżonymi danymi.

Oto jakiś powtarzalny przykładowy kod w D3.v4 i zrównoważonym fragmentem ścieżki chciałbym dodać koła do:

var data=[{group:1,x:6,y:8},
  {group:1,x:4,y:4},
  {group:1,x:1,y:2},
  {group:2,x:8,y:3},
  {group:2,x:1,y:6},
  {group:2,x:7,y:5},
  {group:3,x:7,y:1},
  {group:3,x:6,y:6},
  {group:3,x:3,y:2}];

var height = 600
var width = 800

var svg = d3.select("body")
  .append("svg")
  .attr("height", "100%")
  .attr("width", "100%");

var colours = ["#0000FF",
  "#FF0000",
  "#00FF00"
];

var line = d3.line()
  .x(function(d, i) {
    return d.x * 20;
  })
  .y(function(d, i) {
    return d.y * 20;
  })
  .curve(d3.curveNatural);

function tweenDash() {
  var l = this.getTotalLength(),
    i = d3.interpolateString("0," + l, l + "," + l);
  return function(t) {
    return i(t);
  };
}

function transition(selection) {
  selection.each(function() {
    d3.select(this).transition()
      .duration(5000)
      .attrTween("stroke-dasharray", tweenDash)
      .ease(d3.easeLinear);
  })
}

var dataGroup = d3.nest()
  .key(function(d) {
    return d.group;
  })
  .entries(data);

dataGroup.forEach(function(d, i) {

  var path = svg.append("path")
    .attr("d", line(d.values))
    .attr("stroke", colours[i])
    .attr("stroke-width", 1)
    .attr("fill", "none");

  transition(d3.selectAll("path"))

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
0
JamesR 17 październik 2020, 12:37

1 odpowiedź

Najlepsza odpowiedź

Korzystanie z Ten przykład dodałem kręgi do swoich ścieżek. Należy pamiętać, że nie podążają za ścieżką idealnie, ale jest to objęte wzrostem promienia.

Kilka razy, używasz .forEach() lub .each(), aby iterować dane lub wybór, ale nie musisz. d3 jest wykonany do pracy z tablicami danych jednocześnie, dzięki czemu można łatwo zastosować jedną transformację do wielu elementów, każdy z wykorzystaniem własnych danych. Przyzwyczajenie się do tego może drastycznie poprawić swoje doświadczenie deweloperskie.

var data = [{
    group: 1,
    x: 6,
    y: 8
  },
  {
    group: 1,
    x: 4,
    y: 4
  },
  {
    group: 1,
    x: 1,
    y: 2
  },
  {
    group: 2,
    x: 8,
    y: 3
  },
  {
    group: 2,
    x: 1,
    y: 6
  },
  {
    group: 2,
    x: 7,
    y: 5
  },
  {
    group: 3,
    x: 7,
    y: 1
  },
  {
    group: 3,
    x: 6,
    y: 6
  },
  {
    group: 3,
    x: 3,
    y: 2
  }
];

var height = 600
var width = 800

var svg = d3.select("body")
  .append("svg")
  .attr("height", "100%")
  .attr("width", "100%");

var colours = ["#0000FF",
  "#FF0000",
  "#00FF00"
];

var line = d3.line()
  .x(function(d, i) {
    return d.x * 20;
  })
  .y(function(d, i) {
    return d.y * 20;
  })
  .curve(d3.curveNatural);

function tweenDash() {
  var l = this.getTotalLength(),
    i = d3.interpolateString("0," + l, l + "," + l);
  return function(t) {
    return i(t);
  };
}

function tweenCircle(i, paths) {
  var path = paths
    .filter(function(_, j) { return i === j; })
    .node();
  var l = path.getTotalLength();

  return function(t) {
    var p = path.getPointAtLength(t * l);
    return "translate(" + [p.x, p.y] + ")";
  };
}

function transition(path, circle) {
  path.transition()
    .duration(2000)
    .attrTween("stroke-dasharray", tweenDash)
    .ease(d3.easeLinear);

  circle.transition()
    .duration(2000)
    .attrTween("transform", function(d, i) { return tweenCircle(i, path); })
    .ease(d3.easeLinear);
}

var dataGroup = d3.nest()
  .key(function(d) {
    return d.group;
  })
  .entries(data);

var path = svg.selectAll('path')
  .data(dataGroup)
  .enter()
  .append("path")
  .attr("d", function(d) { return line(d.values); })
  .attr("stroke", function(d, i) { return colours[i]; })
  .attr("stroke-width", 1)
  .attr("fill", "none");

var circle = svg.selectAll('circle')
  .data(dataGroup)
  .enter()
  .append("circle")
  .attr("fill", function(d, i) { return colours[i]; })
  .attr("transform", function(d) {
    const start = d.values[0];
    return "translate(" + [start.x, start.y] + ")"; })
  .attr("r", 8);

transition(path, circle);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
1
Ruben Helsloot 17 październik 2020, 10:32