score:21
Accepted answer
you simply need to set the origin()
function accordingly. in the second case this is straightforward, in the first case somewhat more difficult because you are using coordinates as well as a transform. the basic pattern (for the second case) looks like this:
.origin(function() {
var t = d3.select(this);
return {x: t.attr("x"), y: t.attr("y")};
})
updated jsfiddle here.
score:0
group element has no x/y attributes - no problem! create ones:
var node = svg.append("g")
.attr('x',x_1)
.attr('y',y_1)
.attr("class","node")
.attr("name","node_a")
.attr("transform","translate(" + x_1 + ", " + y_1 +")")
.call(drag);
when, the .origin function from lars will work
and dont forget to update x,y attributes, while dragging:
function dragged() {
d3.select(this).attr("transform","translate(" + d3.event.x + ", " + d3.event.y +")");
d3.select(this).attr("x",d3.event.x);
d3.select(this).attr("y",d3.event.y);
}
Source: stackoverflow.com
Related Query
- How to set the Origin (drag.origin) for drag behavior in d3 JavaScript library
- How to set the origin while drag in d3.js in v4
- How to set the label for each vertical axis in a parallel coordinates visualization?
- How do you change the interpolation for a zoom behavior in d3.js
- How do I graph an individual line for each the groups within a Javascript map object using D3.js
- How do I use two versions of the same javascript library without bleeding functions in the same page?
- d3 library - how to set the legend values
- How do I set the X values for a singled stacked horizontal bar chart using d3.js?
- D3.js version 4: How to properly set the x-axis-intervals for a histogram
- How to properly set the type for property `d` in `path` element in a d3 react typescript application
- How can I set the transform origin to the middle of this rectangle in D3?
- need to set value for r(radius) in the <circle> tag using javascript
- How to limit the d3.js drag behavior on a mercator map
- How to set pattern origin at the top left point of each bar of a barchart in d3.js?
- How to set a scale for the time series, current x scale gives me NaN?
- how do I set up a grouping query on the server side. I want set up the query so I can use it for a pie chart in front end, using d3js
- How can I add an image as the fill for a circle dynamically in javascript using d3
- How to make into d3.js v3.4 the same behavior drag as into v3.1?
- D3.js: How to get the computed width and height for an arbitrary element?
- How to set text color for my d3 chart title?
- How do I display dates on the x-axis for nvd3 / d3.js?
- How to set the background-color of a D3.js svg?
- D3 Differentiate between click and drag for an element which has a drag behavior
- d3.js - How can I set the cursor to hand when mouseover these elements on SVG container?
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- how to set the domain and scale on an axis on a nvd3.js multiBarChart
- D3 force layout: How do I set the size of every node?
- D3js: How do I clear the zoom scale set by the d3.zoom event?
- How to use a JavaScript chart library like D3.js or Raphaël in server-side Java
- Putting an arrow (marker) at specific point on a path when using the d3 javascript library
More Query from same tag
- How to make a bar bigger on mouseover in D3?
- d3v4 Liquid Chart - water/oil effects - refactor
- How can I set linkdistance in forcenetwork in R?
- Tree Layout - Links - Data Formatting
- rendering d3-timeseries on d3-plunker
- D3.js - Adding a loading notification during AJAX request
- Prob reading bar chart with d3js v7 Error: <rect> attribute height: Expected length, "NaN"
- Logarithmic range
- Horizontal stacked bar: one tick not displaying
- Use only hour and minutes on x-axis on D3.js
- How to rotate SVG using d3.drag()?
- How to have only some edges react to `mouseover` in a D3 v4 force graph
- Required Help in Hiding Table Rows - dc.js
- how to show ordinal axis in d3
- How to use D3.js to visualize JSON returned from my app's GET request
- D3 Force Directed Graph ajax update
- Why isn't the d3 voronoi polygon drag event triggering on polygons in force simulation?
- Insert SVG element before another SVG element with class
- passing data into d3js
- d3.js Date vs Half hour heat map not working
- Add text into an svg path using d3
- Understanding Typescript definition
- d3.json cannot parse an 'Infinity' value
- How to append path from data inside nested structure in d3.js?
- d3.js, how can i create an axis with custom labels and customs ticks?
- D3 line chart legend not working with v3 but working with v2
- Return summary statistics from multiple arrays
- D3 – Compare and pass object values from multiple datasets
- How to resolve "Uncaught TypeError: undefined is not a function" in javascript"?
- Why is d3 ignoring my color array?