d3.js

问题 Converting a D3.js forcediagram from version 5 to 6.1, I write: let drag = simulation => { function dragstarted(event, d) { if (!event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(event,d) { d.fx = event.x; d.fy = event.y; } function dragended(event,d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } // release of fixed positions function dblclick(d) { d.fx = null; d.fy = null; } return d3.drag() .on("start", dragstarted)

问题 I'm trying to use WebCola http://marvl.infotech.monash.edu/webcola/ but I can't find a link to the real documentation. The website seems to have only a few examples and some (apparently) auto-generated docs which are not really useful for anything at all. It's a very cool library so I'm sure there's some very cool documentation somewhere. Can anyone share the link? 回答1: https://github.com/tgdwyer/WebCola Look at here, i think this will help 来源： https://stackoverflow.com/questions/33889372

问题 I have a swarm plot that shows ranges from 0 to 1 on a linear x axis and size via the SVG circle's radius attribute. Snippet below: <script src="https://d3js.org/d3.v5.min.js"></script> I have had modest success by setting the strength to a low value and forceCollide to a high value: var simulation = d3.forceSimulation(data) .force("x", d3.forceX(function(d) { return xScale(d.pequity); }).strength(0.01)) .force("y", d3.forceY(function(d) { return 100; }).strength(0.01)) .force("collide", d3

问题 I am trying to replicate the gauge seen here in React with Hooks. It's the first time I am working with D3.js and even though I managed to replicate the gauge itself, the behavior is a bit strange (transition of the needles does not work) and I am not fully understanding the dynamics between useEffect and D3. Basically I want to add two needles that will each receive different values and use a transition when their value changes. //declaring angle value const [angle1, setAngle1] = useState(0)

问题 I am trying to read in csv data using d3 in codepen.io and it is not printing me the data, even though it is printing console.log('hello') outside the d3.csv() : d3.csv("http://learnjsdata.com/data/expenses.csv", function(data) { console.log(data) }) I added d3 cdn of course. Whats wrong with codepen.io ? How to make it working? In the debug mode I see that codepen.io does not like that the expenses.csv is loaded over http . 回答1: I think it depends on the version of d3 you're using. In d3 v6,

问题 In the code below, I need to make the bubbles with the highest values ​​float to the left of the screen, but I have no deep knowledge of D3.js and I can't find a way to do this. My code <script type="text/javascript"> dataset = { "children": [{"Name":"Olives","Count":10}, {"Name":"Tea","Count":8}, {"Name":"Mashed Potatoes","Count":6}, {"Name":"Boiled Potatoes","Count":5}, {"Name":"Milk","Count":4}, {"Name":"Chicken Salad","Count":4}, {"Name":"Vanilla Ice Cream","Count":2}, {"Name":"Cocoa",

问题 I am very very new to javascript and mithril.js. I am trying to create a very simple bar plot using mithril.js and d3.js. But, I am not having any luck even getting the axis in place. Firstly, I created a mithril "svg" component and appended a mithril "g" compent as follows: var g = m(gView, {transpose:"translate(10, 10)"}) var svg = m(SVGView, {width: 100, height:100}, g) where gView and SVGView are as follows: var gView = { view: function(vnode) { return m("g", vnode.attrs, [vnode.children]

问题 I've configured my Angular app with Yeoman, and have included many JS libraries like d3. The application works fine when I use grunt serve to see the app. But when I try to build it using grunt build , and open the generated index.html, the app breaks because it cannot find D3. If I manually include the script tag for loading D3 in final index.html, then it starts working, but that's not how it's supposed to work, right? The grunt build also removes google Fonts which I've included in my app:

问题 There are some discussions around triggering d3 drag programmably. Usually people give a work around way. Like store the drag function and trigger it directly. So is there a way to trigger d3 drag using mouse events? The d3 drag must be implemented according to mouse events. In my app, there are complicated drag setups and expose the drag handlers is not feasible. Also, I hope the code is tested only on boundaries instead of having to open it up. I'm wondering how d3 implemented the drag. I

问题 I'm trying to understand how we can go about using data joins with line graphs. Most examples I see use datum(), rather than data() with our data join, and a direct mapping of the line function when appending the path element. I think we prefer using datum() in this case because the entire line function is sort of a single path. To understand data joins more though, I would like to see how I could make this work for a single line graph, but the snippet I try below does seem to work. My code: