score:4

Accepted answer

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


Related Query

More Query from same tag