Agfdhyk

var d3Data = JSON.parse(jQuery('body .Jsondata').text())[0];



const m0 = {

  id: "123",

  variables: [

   

    {

      name: "chart",

      inputs: ["partition","data","d3","DOM","width","color","arc","format","radius"],

      value: (function(partition,data,d3,DOM,width,color,arc,format,radius)

{

var formatNumber = d3.format(",d");

var b = {

  w: 140, h: 30, s: 3, t: 10

};	

	



								  

								   const root = partition(data);



  root.each(d => d.current = d);



  const svg = d3.select(DOM.svg(width, width))

      .style("width", "100%")

      .style("height", "auto")

      .style("font", "20px sans-serif");



  const g = svg.append("g")

      .attr("transform", `translate(${width / 2},${width / 2})`);



  const path = g.append("g")

    .selectAll("path")

    .data(root.descendants().slice(1))

    .enter().append("path")

      .attr("fill", d => { while (d.depth > 1) d = d.parent; console.log('d value--',d); return (typeof d.data.color != 'undefined' && d.data.color != '') ? d.data.color : color(d.data.name); })

      .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0)

      .attr("d", d => arc(d.current));



  path.filter(d => d.children)

      .style("cursor", "pointer")

      .on("click", clicked);



  path.append("title")

      .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}n${format(d.value)}`);



  const label = g.append("g")

      .attr("pointer-events", "none")

      .attr("text-anchor", "middle")

      .style("user-select", "none")

    .selectAll("text")

    .data(root.descendants().slice(1))

    .enter().append("text")

      .attr("dy", "0.35em")

      .attr("fill-opacity", d => +labelVisible(d.current))

      .attr("transform", d => labelTransform(d.current))

      .text(d => d.data.name);



  const parent = g.append("circle")

      .datum(root)

      .attr("r", radius)

      .attr("fill", "none")

      .attr("pointer-events", "all")

      .on("click", clicked);



  

 initializeBreadcrumbTrail();

  return svg.node();

				

			

function clicked(p) {

  	updateBreadcrumbs(getParents(p),p.value);

   var level = p.ancestors().map(p => p.data.name).reverse();

   

   // var str = '';

   // if(level.length > 1){

	// for(var i=0;i<level.length;i++){

		// str += '<span class="str_att show-pointer" style="background-color: #8cb125;margin-right:10px;border-radius: 5px;padding: 5px 10px;"><a href="#" style="text-decoration:none;color: #fff;font-weight: 700;">'+level[i]+'</a></span>';

	// }

   // }

   

   

   //jQuery('.breadCrumb').html(str);

   console.log('level-=-',level);

    parent.datum(p.parent || root);



    root.each(d => d.target = {

      x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,

      x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,

      y0: Math.max(0, d.y0 - p.depth),

      y1: Math.max(0, d.y1 - p.depth)

    });



    const t = g.transition().duration(750);

	//console.log('p',p);

    // Transition the data on all arcs, even the ones that aren’t visible,

    // so that if this transition is interrupted, entering arcs will start

    // the next transition from the desired position.

    path.transition(t)

        .tween("data", d => {

          const i = d3.interpolate(d.current, d.target);

		 

          return t => d.current = i(t);

        })

      .filter(function(d) {

        return +this.getAttribute("fill-opacity") || arcVisible(d.target);

      })

        .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0)

        .attrTween("d", d => () => arc(d.current));



    label.filter(function(d) {

        return +this.getAttribute("fill-opacity") || labelVisible(d.target);

      }).transition(t)

        .attr("fill-opacity", d => +labelVisible(d.target))

        .attrTween("transform", d => () => labelTransform(d.current));

  }

  function initializeBreadcrumbTrail() {

  // Add the svg area.

  var trail = d3.select(".breadCrumb").append("svg:svg")

    .attr("width", width)

    .attr("height", width/10)

    .attr("id", "trail");

  // Add the label at the end, for the percentage.

  trail.append("svg:text")

    .attr("id", "endlabel")

    .style("fill", "#000");

}

function updateBreadcrumbs(nodeArray, percentageString) {

  // Data join; key function combines name and depth (= position in sequence).

  var g = d3.select("#trail")

    .selectAll("g").on("click", clicked)

    .data(nodeArray, function(x) { return percentageString + x.data.name + x.depth; });



  // Add breadcrumb and label for entering nodes.

  var entering = g.enter().append("svg:g");



  entering.append("svg:polygon")

    .attr("points", breadcrumbPoints)

    .style("fill", function(x) { return color(x.data.name); });



  entering.append("svg:text")

    .attr("x", (b.w + b.t) / 2)

    .attr("y", b.h / 2)

    .attr("dy", "0.35em")

    .attr("text-anchor", "middle")

    .text(function(x) { return x.data.name; });



  entering.attr("transform", function(x, i) { return "translate(" + i* (b.w + b.s) + ", 0)"; });





  // Remove exiting nodes.

  g.exit().remove();



  // Now move and update the percentage at the end.

  d3.select("#trail").select("#endlabel")

    .attr("x", (nodeArray.length + 0.5) * (b.w + b.s))

    .attr("y", b.h / 2)

    .attr("dy", "0.35em")

    .attr("text-anchor", "middle")

    .text(percentageString);



  // Make the breadcrumb trail visible, if it's hidden.

  d3.select("#trail")

    .style("visibility", "");



}



function breadcrumbPoints(x, i) {

  var points = ;

  points.push("0,0");

  points.push(b.w + ",0");

  points.push(b.w + b.t + "," + (b.h / 2));

  points.push(b.w + "," + b.h);

  points.push("0," + b.h);

  if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.

    points.push(b.t + "," + (b.h / 2));

  }

  return points.join(" ");

}



  function arcVisible(d) {

    return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0;

  }



  function labelVisible(d) {

    return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03;

  }



  function labelTransform(d) {

    const x = (d.x0 + d.x1) / 2 * 180 / Math.PI;

    const y = (d.y0 + d.y1) / 2 * radius;

    return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;

  }			

	

	function getParents(a){

  var nodeArray = [a];

  while(a.parent){

    nodeArray.push(a.parent);

    a = a.parent

  }

  return nodeArray.reverse();

}



 

}

)

    },

    {

      name: "data",

      value: (function(){

		  return d3Data;

})

    },

    {

      name: "partition",

      inputs: ["d3"],

      value: (function(d3){

		//  console.log('partition',d3);

		  return(

data => {

  const root = d3.hierarchy(data)

      .sum(d => d.size)

      .sort((a, b) => b.value - a.value);

	  console.log('data',d3.partition().size([2 * Math.PI, root.height+1])(root));

  return d3.partition()

      .size([2 * Math.PI, root.height+1])

    (root);

	



	

}

)



})

    },

    {

      name: "color",

      inputs: ["d3","data"],

      value: (function(d3,data){return (

d3.scaleOrdinal().range(d3.quantize(d3.interpolateRainbow, data.children.length + 1))

)})

    },

    {

      name: "format",

      inputs: ["d3"],

      value: (function(d3){return(

d3.format(",d")

)})

    },

    {

      name: "width",

      value: (function(){return(

932

)})

    },

    {

      name: "radius",

      inputs: ["width"],

      value: (function(width){return(

width / 6

)})

    },

    {

      name: "arc",

      inputs: ["d3","radius"],

      value: (function(d3,radius){return(

d3.arc()

    .startAngle(d => d.x0)

    .endAngle(d => d.x1)

    .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))

    .padRadius(radius * 1.5)

    .innerRadius(d => d.y0 * radius)

    .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1))

)})

    },

    {

      name: "d3",

      inputs: ["require"],

      value: (function(require){return(

require("https://d3js.org/d3.v5.min.js")

)})

    }

  ]

};



const notebook = {

  id: "123",

  modules: [m0]

};





function loadData(){

		 $.ajax({

				type:'GET',

				url:'http://shopnz.in/wp-admin/admin-ajax.php?action=wp_ajax_list_items&sunburst=sunburstcat',

				success: function(response){

				 console.log('response',response[0]);

				 console.log('data-=-=',data);

                                  data = response[0];

	

	}

			});

	

}

export default notebook;

[{"name":"Balance","term_id":"588","slug":"balance","parent":"0","has_children":true,"color":"#aac62d","children":[{"name":"Aroma","term_id":"589","slug":"aroma","parent":"588","has_children":true,"color":"#aac62d","children":[{"name":"Earth","term_id":"593","slug":"earth","parent":"589","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Fruit","term_id":"594","slug":"fruit","parent":"589","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Herb","term_id":"595","slug":"herb","parent":"589","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Pungent","term_id":"596","slug":"pungent","parent":"589","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Spice","term_id":"597","slug":"spice","parent":"589","has_children":false,"size":"1000","color":"#aac62d"}]},{"name":"Health","term_id":"590","slug":"health","parent":"588","has_children":true,"color":"#aac62d","children":[{"name":"Body","term_id":"598","slug":"body","parent":"590","has_children":true,"color":"#aac62d","children":[{"name":"Fatigue","term_id":"613","slug":"fatigue","parent":"598","has_children":true,"color":"#aac62d","children":[{"name":"Sleep","term_id":"616","slug":"sleep","parent":"613","has_children":false,"size":"1000","color":"#aac62d"}]},{"name":"PainRelief","term_id":"614","slug":"painrelief","parent":"598","has_children":true,"color":"#aac62d","children":[{"name":"Spasms","term_id":"617","slug":"spasms","parent":"614","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Relaxed","term_id":"618","slug":"relaxed","parent":"614","has_children":false,"size":"1000","color":"#aac62d"}]},{"name":"Digestion","term_id":"615","slug":"digestion","parent":"598","has_children":true,"color":"#aac62d","children":[{"name":"Appetite","term_id":"619","slug":"appetite","parent":"615","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Nausea","term_id":"620","slug":"nausea","parent":"615","has_children":false,"size":"1000","color":"#aac62d"}]}]},{"name":"Mind","term_id":"599","slug":"mind","parent":"590","has_children":true,"color":"#aac62d","children":[{"name":"Behavior","term_id":"621","slug":"behavior","parent":"599","has_children":true,"color":"#aac62d","children":[{"name":"Sedative","term_id":"623","slug":"sedative","parent":"621","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Energetic","term_id":"624","slug":"energetic","parent":"621","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Focus","term_id":"625","slug":"focus","parent":"621","has_children":false,"size":"1000","color":"#aac62d"}]},{"name":"Mood","term_id":"622","slug":"mood","parent":"599","has_children":true,"color":"#aac62d","children":[{"name":"Creative","term_id":"626","slug":"creative","parent":"622","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Uplifted","term_id":"627","slug":"uplifted","parent":"622","has_children":false,"size":"1000","color":"#aac62d"}]}]}]},{"name":"Medical","term_id":"591","slug":"medical","parent":"588","has_children":true,"color":"#aac62d","children":[{"name":"Condition","term_id":"600","slug":"condition","parent":"591","has_children":true,"color":"#aac62d","children":[{"name":"Cancer","term_id":"602","slug":"cancer","parent":"600","has_children":false,"size":"1000","color":"#aac62d"},{"name":"PMS","term_id":"603","slug":"pms","parent":"600","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Arthritis","term_id":"628","slug":"arthritis","parent":"600","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Asthma","term_id":"629","slug":"asthma","parent":"600","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Cachexia","term_id":"630","slug":"cachexia","parent":"600","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Crohnu2019s Disease","term_id":"631","slug":"crohns-disease","parent":"600","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Depression (currently a 'symptom')","term_id":"632","slug":"depression-currently-a-symptom","parent":"600","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Epilepsy","term_id":"633","slug":"epilepsy","parent":"600","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Gastrointestinal Disorder","term_id":"634","slug":"gastrointestinal-disorder","parent":"600","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Hypertension","term_id":"635","slug":"hypertension","parent":"600","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Parkinsonu2019s","term_id":"636","slug":"parkinsons","parent":"600","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Phantom Limb Pain","term_id":"637","slug":"phantom-limb-pain","parent":"600","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Spinal Cord Injury","term_id":"638","slug":"spinal-cord-injury","parent":"600","has_children":false,"size":"1000","color":"#aac62d"}]},{"name":"Symptom","term_id":"601","slug":"symptom","parent":"591","has_children":true,"color":"#aac62d","children":[{"name":"Anxiety","term_id":"604","slug":"anxiety","parent":"601","has_children":true,"color":"#aac62d","children":[{"name":"ACDC","term_id":"612","slug":"acdc","parent":"604","has_children":false,"size":"1000","color":"#aac62d"}]},{"name":"Depresssion","term_id":"605","slug":"depresssion","parent":"601","has_children":false,"size":"1000","color":"#aac62d"}]}]},{"name":"Terpenes","term_id":"592","slug":"terpenes","parent":"588","has_children":true,"color":"#aac62d","children":[{"name":"Humulene","term_id":"606","slug":"humulene","parent":"592","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Limonene","term_id":"607","slug":"limonene","parent":"592","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Linalool","term_id":"608","slug":"linalool","parent":"592","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Myrcene","term_id":"609","slug":"myrcene","parent":"592","has_children":false,"size":"1000","color":"#aac62d"},{"name":"Pinene","term_id":"610","slug":"pinene","parent":"592","has_children":true,"color":"#aac62d","children":[{"name":"Romulan","term_id":"611","slug":"romulan","parent":"610","has_children":false,"size":"1000","color":"#aac62d"}]}]}]}]