score:4
your question is: "is it possible to append an svg to an svg using d3?" that object in the title is a bit misleading (however, if you're really talking about an <object>
or even loading an external svg, you're doing it wrong, and the following explanation would be useless. in that case, answers like this one will be more useful).
the answer is yes. for whatever reason you want to nest those svgs (you probably don't need it), just use the append
method as you would with any other element.
here is a demo, have a look at the console: there is an svg inside an svg.
var svg = d3.select("body").append("svg");
svg.append("text")
.attr("y", 20)
.text("this text is in the outer svg");
var innersvg = svg.append("svg");
innersvg.append("text")
.attr("y", 50)
.text("this text is in the inner svg");
var mysvg = (new xmlserializer()).serializetostring(svg.node());
console.log(mysvg)
<script src="https://d3js.org/d3.v4.min.js"></script>
score:0
as you can see, our component will be code-driven, with nothing in the template except a div, which will serve as our container. the chart size will be inferred from the size of this element, which will be helpful in making the svg react like a normal html node. here is the main part of the code, the ‘src/app/bar-chart/bar-chart.component.ts’ file:
private createchart(): void {
d3.select('svg').remove();
const element = this.chartcontainer.nativeelement;
const data = this.data;
const svg = d3.select(element).append('svg')
.attr('width', element.offsetwidth)
.attr('height', element.offsetheight);
const contentwidth = element.offsetwidth - this.margin.left - this.margin.right;
const contentheight = element.offsetheight - this.margin.top - this.margin.bottom;
const x = d3
.scaleband()
.rangeround([0, contentwidth])
.padding(0.1)
.domain(data.map(d => d.letter));
const y = d3
.scalelinear()
.rangeround([contentheight, 0])
.domain([0, d3.max(data, d => d.frequency)]);
const g = svg.append('g')
.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
g.append('g')
.attr('class', 'axis axis--x')
.attr('transform', 'translate(0,' + contentheight + ')')
.call(d3.axisbottom(x));
g.append('g')
.attr('class', 'axis axis--y')
.call(d3.axisleft(y).ticks(10, '%'))
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '0.71em')
.attr('text-anchor', 'end')
.text('frequency');
g.selectall('.bar')
.data(data)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', d => x(d.letter))
.attr('y', d => y(d.frequency))
.attr('width', x.bandwidth())
.attr('height', d => contentheight - y(d.frequency));
}
}
link webs: https://tienanhvn.blogspot.com/2019/06/create-responsive-angular-d3-charts.html
Source: stackoverflow.com
Related Query
- How to append an svg to an prexisting svg using d3.js?
- How to dynamically create append svg line using d3js?
- How to append multiple images in SVG using javascript?
- How to dynamically append text to svg using d3 and Ajax?
- How to add an image to an svg container using D3.js
- How do I get the width of an svg element using d3js?
- Append SVG canvas to element other than body using D3
- How to drag an svg group using d3.js drag behavior?
- How to show a tooltip with value when mouseover a svg line graph using d3.js?
- How to get reference to SVG (child) elements nested in another SVG element (parent) using D3?
- 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 render end ticks always using d3 svg axis
- How do I create a minimap of an SVG using D3 v5 and show the current viewport dimensions?
- How do I save an svg node to a file using nodejs?
- d3.js / svg - how to dynamically append text to my arcs
- How to create a flow layout in SVG using D3.js?
- How to append a new div element that is sibling of first div created using d3?
- How to select and deselect a svg line and change its color on selection and deselection using d3.js and javascript , jquery?
- How to create responsive svg using d3.js
- How to hierarchically append "composed" elements based on elements' attributes using D3 d3js?
- How to color SVG image based on value from color range using d3?
- Using D3 to generate SVG Pie Chart how to vertically align text
- Using d3.behavior.drag, How to keep a drag image visible outside of the svg element
- How so create complex SVG shapes using D3JS?
- How to create SVG with grid lines using D3JS
- How to update all data representing an SVG line using d3?
- How to append text to SVG
- Svg D3.js How to selectAll using condition
More Query from same tag
- Binding on click events to context menu list elements
- D3 with Topojson only renders parts of the map
- How do I use JSON data in D3 which was received from WEB-Service?
- D3.js Parallel Coordinates with Horizontal layout for axes
- How to make a color gradient bar using d3js
- DC.js X-axis hour labels appear as thousandths
- Resize my chart based on my xAxis text with d3.js
- Confused with selection of d3.js version 3
- How to add on-click events to D3 axis ticks
- Build issue angular 5 has no exported member 'DSVRowAny'
- How to render a directive only after data is loaded from tsv in angular js
- D3: Passing object array data to a barchart on mouseover
- D3 4.9.1 returns different value for .style("transform")
- D3 exit().remove() on stack area chart
- Unable to show the X-axis value only once inside the "rect " using d3
- d3js make tooltip stay when clicked
- Select feature from GeoJSON based on a node name
- Constraints for D3 mouse wheel zoom behaviour
- d3v5 Angular 8 production mode - ERROR TypeError: (void 0) is not a function
- How to move labels to outside pie chart in D3
- How to display custom tooltips on line chart using Rickshaw Library
- Show "now" line on event drops and add slight margin to the right
- Binding Data from tutorial example
- histogram bars width with scale applied
- Zoom softly into the center of a D3 map
- Wrapping words in d3 to get one word in one line
- Preventing overlap of text in D3 pie chart
- What is D3js version support policy?
- Dynamically changing rateById.set in chloropeth map
- Pie chart animation when data changes in plottable.js