score:1

Custom the source and target of d3.svg.diagonal(). Transform the source and target's space with different methods.

```
var diagonal = d3.svg.diagonal()
.source(function (d) {
var innerRadius = Math.max(0, y(d.source.y));
var arcCenter = x(d.source.x + d.source.dx/2.0);
return {"x": innerRadius * Math.cos(Math.PI - arcCenter), //radial space
"y": innerRadius * Math.sin(Math.PI - arcCenter)};
})
.target(function (d) { //normal space
return {"x": d.target.y + rect_height / 2,
"y": d.source.x ? d.target.x : d.target.x + rect_width};
})
.projection(function (d) {
return [d.y, d.x];
});
```

Source: stackoverflow.com

#### Related Query

- d3.js draw line source and target is different (from an arc generated by d3.svg.arc() to the nodes with Cardinal position)
- Adding another line to chord chart arc title from different source in d3
- Draw svg points from geoJSON query and image using d3 library
- How do I draw line from the outer most arc of the circle
- d3js draw svg rectangle and line issue
- Remove line from chart and draw new one
- Draw a d3 trend line with different color and width for different segments
- how to make sankyplots with no color for source and target node and how to do legend to show the different colors of linkgroup
- How do I remove all children elements from a node and then apply them again with different color and size?
- How to draw straight line in d3.js (horizontally and vertically)
- D3 - Difference between basis and linear interpolation in SVG line
- In d3, how to get the interpolated line data from a SVG line?
- How do I associate SVG elements generated by graphviz to elements in the DOT source code
- Draw an svg arc using d3 knowing 3 points on the arc
- draw a line from one circle to another in d3.js
- Date and time transition from data with line
- SVG line out of arc starting position - d3.js
- D3 and leaflet returning different SVG in Chrome/Safari and Firefox
- unwanted horizontal line from svg mask
- How to draw an ellipse from degree and coordinates
- Add text in rect svg and append it to arc in donut chart
- How can I color one Y-axis line different from the other grid-lines?
- transition a circle into a line by unrolling it with SVG and d3
- How to select and deselect a svg line and change its color on selection and deselection using d3.js and javascript , jquery?
- Load and modify svg files from node.js
- How to add links from CSV file to SVG elements generated with D3?
- How to position svg circles on a line and curve it?
- d3 connecting rectangles from different groups by a line
- How can I offset the source and target points of a bezier curve using D3's link generator?
- Foreignobject from SVG is not converted and appear in PDF by TCPDF

#### More Query from same tag

- Finding x,y coordinates of a point on an Archimedean spiral
- D3.js Invisible rect element when using d3 append to add "rect" elements to an svg
- d3 simple linear chart with jquery ui range slider
- Creating a d3 v4 histogram with an ordinal scale
- D3 adding 19 hours when it formats time
- Any way to have bar graph row show different transition rate in D3
- bar chart d3 circles under the bars
- meteor add d3 grafics dynamically fails
- d3.js force layout increase linkDistance
- Create a multiple line chart with Text data in x-axis using d3.js
- Trying to Refactor Codebase with NY topojson file
- How to display sum total for currently selected series in NVD3.js Pie Chart?
- Error when transitioning an arc: <path> attribute d: Expected arc flag ('0' or '1')
- d3js 4 get coordinate of path transition
- Error: Invalid value for <g> attribute transform="translate(undefined,undefined)"
- d3 js - clustering bubbles to segments
- How to make automatic type inference with adding totals & sorting
- how to import data into d3js correctly
- avoid d3.js circles overlapping
- Splicing array removes wrong node in force-directed graph
- d3.js Grouped Bar Chart: text is not showing on bars
- Make d3.text run sequentially?
- Responsive Donut Chart d3
- Nicing a linear scale with a negative lower bound
- D3 Transition Breaking Redraw
- d3.js mouseover event not triggered when mouse is touching another element too
- D3js force directed graph change strength of connections
- How do I find the top left of my SVG with d3?
- javascript d3 visualization doesn't load/appear until clicking HTML input
- Adding html code to D3 text