score:1
Accepted answer
Problem solved. Angular2 uses
<base href="/">
on the page, which fouls the path's ability to find url(#Arrow).
The solution is to add the marker attribute in d3.js and pre-pend the location.href:
renderArrows() {
var arrows = d3.selectAll('path.arrow');
arrows.each(function (d) {
var path = d3.select(this);
path
.attr('stroke-linecap', 'round')
.attr('marker-end', function(d,i){ return "url(" + location.href + "#Arrow)" })
})
}
More information here: Using base tag on a page that contains SVG marker elements fails to render marker
Source: stackoverflow.com
Related Query
- SVG markers not appearing in Edge and Firefox (D3.js, Angular2)
- Edge does not handle scaling and text-anchor:middle correctly in svg
- SVG getBBox function returns zero in FireFox & Edge (but not in Chrome)
- application not working after chrome update to version 66 but works in firefox and edge
- IE11 does not accept SVG height and width when using D3
- Is it possible to set custom attributes of SVG objects as number and not as string?
- Elements appended to SVG with D3 are not appearing
- D3: "SVG4601: SVG Path data has incorrect format and could not be completely parsed."
- SVG clip-path works in Chrome, but not in Firefox or Safari
- SVG text element text-anchor="middle" not working in Firefox
- Visualization data inserted in the webpage is not properly indented and not appearing at desired position
- D3 and leaflet returning different SVG in Chrome/Safari and Firefox
- SVG not working in Firefox 18
- Foreignobject from SVG is not converted and appear in PDF by TCPDF
- SVG dx+text-anchor middle have different behavior into chrome and firefox
- d3.time.scale() not working date inputs on IE 10 and Firefox
- d3.js 'mousewheel' event is NOT working on Firefox (it works only in Chrome, Safari and IE browsers)
- Svg scale() is not working on Edge(Not Edge Chronium)
- d3.js : re-inserting elements during dragstart/mousedown interferes with click events in Chrome and Safari but not Firefox
- D3.JS ForeignObject not rendering in IE and Firefox
- Displaying SVG elements with D3 and d3.slider: Uncaught TypeError: .exit is not a function
- zoom/pan with d3.js and svg not working
- How can I apply a clipPath in SVG with multiple paths and NOT clip out the area between the paths?
- Microsoft Edge does not render SVG style elements on ajax call to a gzipped SVG file
- Adding image to svg container using d3 not working on FF and Safari
- d3.js(maps) svg elements not appearing when adding them on top of existing svg elements
- Why animated d3 svg line is not synchronized with the axis shift in IE9 but synchronized in IE11 and Chrome?
- Why are tipsy and qtip not picking my svg elements?
- D3 and Leaflet - svg circles not showing
- svg filter not working in mozilla firefox after zoom
More Query from same tag
- How to merge several JSON objects in one and put values from both of them in a tooltip
- D3 map visible area coordinates
- How to change json file in d3.js and update chart using select options
- How to animate the SVG path for an arc?
- D3.js wrap text in rect
- Github SQL Server installation
- Why won't my D3 nodes display their text?
- Export standalone offline html plot of matplotlib figures using mpld3
- Updating D3 streamgraph with new data
- dc.js - Tooltips adding another item?
- Can i give spaces between the bar rectangles without adjusting the height attribute?
- d3 directed graph with varying stroke-widths
- Percentage Change in dc.js/crossfilter
- Duration in d3 animation
- dc.js: using dc.dataCount counts in other d3 charts on page
- D3.js nested items sharing the same data
- D3JS line chart inverted issue
- d3js/svg - Polygon without fixed coordinates?
- d3 version 4 path line smooth transition with Mike Bostock's example
- how to create separate bar chart with JSON array set?
- Ordinal scale category10 mapping everything to same color
- Manipulating path element in HTML
- Sales pipeline chart
- How do you create a d3 line function that will draw 2 lines for x, y1, y2 data?
- DimpleJS barchart styling columns
- How to rescale displayed data in d3.js?
- Changes in d3 (Data-Driven Documents)
- Loop D3 animation of polygon vertex
- Issue while plotting multiple graphs on single page
- bar chart not coinciding with axes in d3.js