CODEWITHSUNDEEP
javascriptd3.jssvg
VenRus
VenRus

Reputation: 41

How do I create a single "<g> = group" with the existing "<g> = groups" in D3.js

I'm newbie in "d3.js", and I'm trying to implement a "doughnut chart" with some description info in the right side, I have grouped each of them in groups like<g class="device-info">, and I want all the created groups <g class="device-info"> to be in one group <g class="device-desc">, but I'm facing trouble to do it, any help will be appreciated.

here is my code:

var colors = ["#249AFF", "#CFDCE5", '#76D3C1']


var data1 = {online: 1430,offline:342, test: 200};

var pie = d3.pie()
  .value(function(data1) {return data1.value })
var data_ready = pie(d3.entries(data1))

var arc = d3.arc()
.innerRadius(60)
.outerRadius(70)
.startAngle(data_ready => data_ready.startAngle)
.endAngle(data_ready => data_ready.endAngle)

var svg = d3.select(".svg")
.attr('width', 350)
.attr('height', 220)

svg.selectAll('path')
.data(data_ready)
.enter()
.append('path')
.attr('d', arc)
.attr('fill', (d, i) => colors[i])
.attr('stroke', 'none')
.attr('transform', "translate(100,130)")


var groups = svg.selectAll(".groups")
    .data(data_ready)
    .enter()
    .append("g")
    .attr("class", "device-info")
    .attr('transform', ( d, i ) =>  {
       i *= 30
       return `translate(90, ${i})` 
    })


    groups.append('circle')
    .attr('fill', (d,i) => colors[i])
    .attr('transform', `translate(147, 0)`)
    .attr('r','5')
    .attr('cx', -20)
    .attr("cy", ( d, i ) =>  {
        return i * 19
    })

    groups.append('text')
    .text(data1 => data1.data.key)
    .attr('fill', function(d,i){ return(colors[i]) })
    .attr('class', 'devices-status')
    .attr('transform', `translate(150, 5)`)
    .style('text-transform', 'capitalize')
    .style('font-size', 14)
    .attr("dx", -15 )
    .attr("dy", ( d, i ) =>  i * 20)


    groups.append('text')
    .text(data1 => data1.data.value + " devices")
    .attr('fill', 'white')
    .style('font-size', 15)
    .attr('class', 'devices')
    .attr('transform', `translate(140, 5)`)
    .attr("dx", -15 )
    .attr("dy", ( d, i ) =>  {
        i += 2;
        return i * 12
    })


    svg.append("text")
    .text('Devices by status')
    .attr('transform' , "translate(10, 25)")
    .style('text-transform', 'uppercase')
    .style('fill', 'rgb(255,255,255)')
    .style('font-size', 15)

    svg.append("text")
    .text(`Total devices ${1772}`)
    .attr('transform' , "translate(10, 45)")
    .style('text-transform', 'capitalize')
    .style('fill', 'rgba(255,255,255, .6)')
    .style('font-size', 13)

and here is a demo: Click here

Upvotes: 1

Views: 47

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

Just append the container group to the SVG, with the respective class...

var containerGroup = svg.append("g")
    .attr("class", "device-desk");

And then append groups to that container group:

var groups = containerGroup.selectAll(".groups")
    .data(data_ready)
    .enter()
    //etc...

Upvotes: 2

Related Questions