d3.js

问题 I want to build a visualization in D3.js that illustrates the concept of potential energy and kinetic energy for my students. In essence, I want the students to be able to drag a skier up a slope (i.e. a Line) and when they drop him, he transits down again. I'm sure it is an easy task in D3 but I'm struggling to understand how I can get the skier icon to be draggable only along the line path? Here's an image for illustration: I want the skier icon to switch place with the ball with the green

问题 My force layout code is standard, based of the usual data: chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)) .force("link", d3.forceLink().distance(function(d) {return d.value;}).strength(0.1)) const svg = d3.create("svg") .attr("viewBox", [0,

问题 My force layout code is standard, based of the usual data: chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)) .force("link", d3.forceLink().distance(function(d) {return d.value;}).strength(0.1)) const svg = d3.create("svg") .attr("viewBox", [0,

问题 The snippet below creates a single x axis with starting ticks of 10. During zoom I'm updating ticks on the rescaled axis with: .ticks(startTicks * Math.floor(event.transform.k)) With .scaleExtent([1, 50]) I can get down from years to 3-hourly blocks fairly smoothly (besides a little label overlap here and there). But, when I request the number of ticks applied on the scale ( xScale.ticks().length ) I get a different number to the one I just assigned. Also, when I get the labels ( xScale.ticks

问题 The snippet below creates a single x axis with starting ticks of 10. During zoom I'm updating ticks on the rescaled axis with: .ticks(startTicks * Math.floor(event.transform.k)) With .scaleExtent([1, 50]) I can get down from years to 3-hourly blocks fairly smoothly (besides a little label overlap here and there). But, when I request the number of ticks applied on the scale ( xScale.ticks().length ) I get a different number to the one I just assigned. Also, when I get the labels ( xScale.ticks

问题 I have a D3 v5 treemap that I show three levels of the hierarchy via a filter. Showing all levels at once would make the map too busy. I'd like to employ a drill down or drill up feature such that when you click on a given rect (either child or parent) that re-sets that rect as the root node and then displays another three levels of the hierarchy from that new root node. I think I'm getting the new root node data, but I can't seem to get the map to update correctly with the onclick (the

问题 I have no idea of what I'm doing wrong at this point. scalePoint works and the values are in line with the axis, but scaleBand does for some reason shift left. My fiddle: https://jsfiddle.net/go0r0yco/ Selected parts of the code from my file: var x = d3.scaleBand() .range([0, width]); var y = d3.scaleLinear() .range([height, 0]); var xAxis = d3.axisBottom() .scale(x); var yAxis = d3.axisLeft() .scale(y); // the domain x.domain(myData.map(function (d) { console.log(d.ball); return d.ball; }));

问题 I have created the code below based on Mike Bostock's example in Observable (which I know is not the same as raw d3/ javascript) https://observablehq.com/@d3/radial-dendrogram However, it: only displays if I remove the return svg.attr("viewBox", autoBox).node(); at the end of the chart function. I suspect that is causing the issues below is tightly cropped looks like the centre is at coordinate 0,0 in the top left of the screen, so 3 quarters of the viz is off the screen. I have tried adding

问题 I have created the code below based on Mike Bostock's example in Observable (which I know is not the same as raw d3/ javascript) https://observablehq.com/@d3/radial-dendrogram However, it: only displays if I remove the return svg.attr("viewBox", autoBox).node(); at the end of the chart function. I suspect that is causing the issues below is tightly cropped looks like the centre is at coordinate 0,0 in the top left of the screen, so 3 quarters of the viz is off the screen. I have tried adding

问题 I am trying to create an animation where circles are being animated on multiple paths. I am able to get the animation I want for one of the paths but am not sure why the circles are only animating on that particular path, instead of being distributed according to the path they belong. The full code can be found on my bl.ocks page: https://bl.ocks.org/JulienAssouline/4a11b54fc68c3255a85b31f34e171649 This is the main part of it var path = svg.selectAll("path") .data(data.filter(function(d){