#StackBounty: #d3.js Render text with nested data in D3 js version 5

Bounty: 50

I’m trying to render a concentric pie chart split into four departments from a department store. Each department has a nested products array of product objects. There are three circles, inner, middle, outer which represent high margin, middle margin, low margin. I can create the graph see below, however, I cannot get the product names to render into the correct department because the data is nested. Below is the data and the method to render the high margin circle as well as a screen shot of what I have right now. I am using React which is the .ref in the renderMiddleCircle method

this.data = [
  { 
    id: 'department1',
    name: 'Electronics',
    value: 100,
    products: [
      {
        description: 'latptop computers',
        id: 'product1',
        name: 'Fast Laptop computers',
        margin: 'high',
      },
      {
        description: 'Coaxial Cable',
        id: 'product2',
        name: 'Gold Coaxial Cable',
        margin: 'high',
      },
    ]
  }, 
  { 
    id: 'department2', 
    value: 100,
    name: 'Hardware',
    products: [
      {
        description: 'Power Drill',
        id: 'product1',
        name: '24 volt power drill',
        margin: 'high'
      },
      {
        description: 'Air tool Wrench',
        id: 'product2',
        name: 'Air Compressor Wrench',
        margin: 'high',
      },
    ]
  },
  { 
    id: 'department3', 
    value: 100,
    name: 'Lawn and Garden',
    products: [
      {
        description: '24 Volt Weed eater'
        id: 'product1',
        name: 'Ryobi Weed Eater',
        margin: 'high',
      },
    ]
  },
  { 
    id: 'department4', 
    value: 100,
    name: 'Grocery',
    products: [
      {
        description: 'Milk',
        id: 'product1',
        name: 'Whole Milk',
        margin: 'high',
      },
    ]
  },
];

renderCenterCircle = (productData) => {
  const highMarginData = productData.map(({ data }) => {
    return {
      ...data,
      products: data.products.filter(product => product.margin === 'high')
    }
  });
  const prepHighMarginData = this.createPie(highMarginData);

  const svg = d3
    .select(this.departmentsRef.current)
    .append('svg')
    .attr('width', WIDTH * 2)
    .attr('height', HEIGHT * 2)
    .append('g')
    .attr('transform', `translate(${WIDTH}, ${HEIGHT})`);

  const g = svg
    .selectAll('.arc')
    .data(prepHighMarginData)
    .enter();

  g.append('g')
    .append('path')
    .attr('d', this.createArc(1.45, 0))
    .style('fill', (d, i) => BRAND_COLORS.steel)
    .style('border-color', (d, i) => BRAND_COLORS.steel);

  g.append('g')
    .attr('transform', (d) => {
      console.log(d);
      return `translate(${this.topicArc.centroid(d)})`
  })
    .append('g')
    .datum(d => d.data.products)
    .append('text')
    .text((d, i) => {
      console.log(d);
      return 'd.name'
    })
    .style('fill', '#fff');
}

enter image description here


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.