score:2
i am definitely not sure if i understand your question, but if you are trying to position circles along a curve, i would suggest...
- write the equation for the curve you want
- convert that curve to a parametric equation
- use the x equation for cx, use y equation for cy
the parametric equation will get you a single row. for each additional row you'll want to factor in an additional offset for all cy's in that row.
here is a very rough example for you to build off of...
const p_circle = {
x(t){ return 100*math.cos((t+10)/10)+150 },
y(t){ return 100*math.sin((t+10)/10)-80 }
}
const p_parab = {
x(t){ return -(10*t-5)+100 },
y(t){ return -(t-5)*(t-5)+20 }
}
let t = array.prototype.concat(
array.from(array(10).keys()).map(d=>[d,1]), //row 1
array.from(array(10).keys()).map(d=>[d,2]), //row 2
array.from(array(10).keys()).map(d=>[d,3]) //row 3
)
const p_parab_2 = {
x(t){ return (10*t-5)+100 }, // removing "-" so that first seat is on left, not right
y(t){ return -(t-5)*(t-5)+20 }
}
// adding 11th seat to center around seat 5 (seat in the center)
let t2 = array.prototype.concat(
array.from(array(11).keys()).map(d=>[d,1]), //row 1
array.from(array(11).keys()).map(d=>[d,2]), //row 2
array.from(array(11).keys()).map(d=>[d,3]) //row 3
)
console.log(t)
d3.select("svg").selectall(".circ")
.data(t)
.enter()
.append("circle")
.attr("class", "circ")
.attr("r",5)
.attr("fill","red")
.attr("cx", (d) => p_circle.x(d[0]))
.attr("cy", (d) => p_circle.y(d[0]) + 15*d[1])
d3.select("svg").selectall(".parab2")
.data(t2)
.enter()
.append("circle")
.attr("class", "parab2")
.attr("r",7)
.attr("fill","blue")
.attr("cx", (d) => p_parab.x(d[0]))
.attr("cy", (d) => p_parab.y(d[0]) + 15*d[1])
d3.select("svg").selectall(".parab")
.data(t)
.enter()
.append("circle")
.attr("class", "parab")
.attr("r",5)
.attr("fill","green")
.attr("cx", (d) => p_parab.x(d[0]))
.attr("cy", (d) => p_parab.y(d[0]) + 15*d[1])
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="250" width="250"></svg>
score:2
i like @steveladavich's answer but i'll propose an alternate. you can use d3
's ability to curve fit to points and then place the circles on the resulting path:
var r = 10,
points = [];
for (var i = 0; i < 10; i++) {
points.push({
x: (500 / 10) * i,
y: math.random() * 500
});
}
var line = d3.line()
.x(function(d) {
return d.x;
})
.y(function(d) {
return d.y;
})
.curve(d3.curvecardinal);
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
var path = svg.append("g")
.datum(points)
.append("path")
.attr("d", line)
.style("fill", "none")
.style("stroke", "none")
.node();
var pathlength = path.gettotallength();
svg.append("g")
.selectall("circle")
.data(d3.range(0, pathlength, r))
.enter()
.append("circle")
.attr("transform", function(d) {
var p = path.getpointatlength(d);
return "translate(" + p.x + "," + p.y + ")";
})
.attr("r", r / 2)
.style("fill", "steelblue");
<script src="http://d3js.org/d3.v4.js"></script>
Source: stackoverflow.com
Related Query
- How to position svg circles on a line and curve it?
- How to plot svg circles on curved line in d3 js?
- How to select and deselect a svg line and change its color on selection and deselection using d3.js and javascript , jquery?
- Svg how to position elements lo left and right like with floats?
- how create a circle group a organization circle image and connect with curve line with D3.js?
- How can I put circles at each point of the x and y coordinate of my line chart?
- How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
- How to draw straight line in d3.js (horizontally and vertically)
- D3 - Difference between basis and linear interpolation in SVG line
- D3 how to change the width and length of SVG
- In d3, how to get the interpolated line data from a SVG line?
- How to show a tooltip with value when mouseover a svg line graph using d3.js?
- D3, SVG and textPath: How to move the text down?
- How can I set the each line color or width in SVG path
- How to fill an image inside my svg circles in d3.js
- How to add filled sections to SVG circles using d3.js
- How to output SVG in a Jupyter notebook using jsdom, D3 and IJavascript
- How can I copy the content of my SVG and append it to another SVG frame?
- How to maintain the SVG marker width and height ?
- How can I get the natural width and height of an svg image element?
- How do I create a minimap of an SVG using D3 v5 and show the current viewport dimensions?
- SVG line out of arc starting position - d3.js
- How to hide and show points on a line graph
- How to drag and drop a group of rectangles in svg in d3.js?
- How to create Stacked Line Chart D3, Multiple Y Axis and common X Axis
- How do I get the d3 svg points to stay in their correct position on the leaflet map when zooming?
- D3 interpolated line curve is janky and doubling back on itself
- How to position NVD3 line graph above all other area / bar graphs?
- How do you translate HTML elements along with SVG elements when zooming and panning with D3
- d3: how to move a vertical line in horizontal direction and support 'pause' and 'continue' movement
More Query from same tag
- d3 pie chart with link in tooltip
- How can I use D3.js "onClick" event with an nvd3 bar when zoomed in on chart data?
- ReferenceError- crossfilter is not defined
- labelling nodes in bubble chart
- how to load geometryCollection of geojson file in d3
- d3-Draw grid line at a location based on the y coordinates?
- Multiple d3 charts in the same row
- Stacked bar chart with negative JSON data
- Uncaught TypeError: Cannot read property 'dispatchEvent' of null
- Create / Update an html table based on a subset of json dataset based on mouseover of a d3 graph
- Convex hull not working with zoom/pan
- D3 click event redirect to Angular route
- nvd3 stacked area chart looks glitchy how to fix?
- D3 combining selection with zoom/pan
- Why are two elements with same coordinates in a d3-group not 100% overlapping?
- Dimple Tooltip Add custom text
- Plot sparklines using D3.js with normalized data
- misalignment in the ticks of axes and rectangles of bar graph in d3
- Adding text labels to force directed graph links in d3.js
- SVG text elements piling on top of one another at the 0,0 position - D3
- Pausing and resuming a transition
- In d3 Chart my xAxis tick text is not coming fully
- Read a huge csv file and populate a Map in Javascript using d3
- Accessing multi-dimensional D3 nest() rollup keys and values
- Why my D3 line graphs shows black areas for each entity?
- D3 map visible area coordinates
- Linking up JSON data to g elements in d3
- Re-scale axis when zoomed
- Set bars sizes according to data percents
- Multiple tree layouts on page, linking between them