c3Js dağılım grafiği için düzen nasıl oluşturulur

-1

Her düğümün 3 değeri temsil etmesi gereken bir dağılım grafiği JSFIDDLE var. Bir D3SS örneğine baktım - Pack Layout.c3Js dağılım grafiği için düzen nasıl oluşturulur

Aşağıda her bir düğüm 3 temele dayanan bir pasta grafik gibi olmalıdır turp olarak C3js kod bloğu

var chart_scatterplot = c3.generate({ 
    tooltip: { 
    contents: function(d, defaultTitleFormat, defaultValueFormat, color) { 

     var company = jsonfile[d[0].index].company; 
     var mailCount = jsonfile[d[0].index].mailCount; 
     var lastInteractedInDays = jsonfile[d[0].index].lastInteractedInDays; 

     var companyData = "<table class='data-c3-table'><tr><td>" + company + "</td></tr><tr><td>" + mailCount + "</td></tr><tr><td>" + lastInteractedInDays + "</td></tr></table>" 
     return companyData; 
     //return (company+mailCount+lastInteractedInDays) // formatted html as youmailCount want 
    } 
    }, 
    point: { 
    r: function(d) { 
    console.log(d) 
     return Math.random() * average; 
    }, 
     focus: { 
    expand: { 
     enabled: false 
    } 
    } 
    }, 
    data: { 
    json: jsonfile, 
    x: 'mailCount', 
    keys: { 
     value: ['mailCount', 'lastInteractedInDays'], 
    }, 
    color: '#49B5A6', 
    type: 'scatter' 
    }, 
    axis: { 
    x: { 
     label: 'Interactions', 
     tick: { 
     fit: false 
     } 
    }, 
    y: { 
     label: 'Days' 
    } 
    }, 
    legend: { 
    show: true 
    } 
});

olup. Bunun için nasıl giderim?

kaynak

2016-04-09 Naveen Paul

Turtaların saçılımı? Lezzetli geliyor. Bu özelleştirme düzeyi c3.js gibi bir şekilde desteklenmeyecektir. En iyi seçenek sadece düz d3.js bunu inşa etmektir:

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 
    body { 
 
    font: 10px sans-serif; 
 
    } 
 
    
 
    .axis path, 
 
    .axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
    } 
 
    
 
    .dot { 
 
    stroke: #000; 
 
    } 
 
</style> 
 

 
<body> 
 
    <script src="//d3js.org/d3.v3.min.js"></script> 
 
    <script> 
 
    var margin = { 
 
     top: 20, 
 
     right: 20, 
 
     bottom: 30, 
 
     left: 40 
 
     }, 
 
     width = 500 - margin.left - margin.right, 
 
     height = 500 - margin.top - margin.bottom; 
 

 
    var x = d3.scale.linear() 
 
     .range([0, width]); 
 

 
    var y = d3.scale.linear() 
 
     .range([height, 0]); 
 
     
 
    var arc = d3.svg.arc() 
 
    .outerRadius(30) 
 
    .innerRadius(0); 
 

 
    var pie = d3.layout.pie() 
 
    .sort(null) 
 
    .value(function(d) { return d; }); 
 

 
    var color = d3.scale.category10(); 
 

 
    var xAxis = d3.svg.axis() 
 
     .scale(x) 
 
     .orient("bottom"); 
 

 
    var yAxis = d3.svg.axis() 
 
     .scale(y) 
 
     .orient("left"); 
 

 
    var svg = d3.select("body").append("svg") 
 
     .attr("width", width + margin.left + margin.right) 
 
     .attr("height", height + margin.top + margin.bottom) 
 
     .append("g") 
 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
    var data = [{ 
 
     x: 2, 
 
     y: 3, 
 
     values: [10, 20, 30] 
 
    }, { 
 
     x: 7, 
 
     y: 7, 
 
     values: [15, 5, 22] 
 
    }, { 
 
     x: 5, 
 
     y: 1, 
 
     values: [14, 32, 40] 
 
    }, { 
 
     x: 1, 
 
     y: 8, 
 
     values: [32, 32, 40] 
 
    }]; 
 

 
    x.domain([0, 10]); 
 
    y.domain([0, 10]); 
 

 
    svg.append("g") 
 
     .attr("class", "x axis") 
 
     .attr("transform", "translate(0," + height + ")") 
 
     .call(xAxis); 
 

 
    svg.append("g") 
 
     .attr("class", "y axis") 
 
     .call(yAxis) 
 
     .append("text"); 
 

 
    var pies = svg.selectAll(".pie") 
 
     .data(data) 
 
     .enter().append("g") 
 
     .attr('class', 'pie') 
 
     .attr('transform', function(d){ 
 
     return 'translate(' + x(d.x) + ',' + y(d.y) + ')'; 
 
     }) 
 
     
 
    pies.selectAll(".arc") 
 
     .data(function(d){ 
 
     return pie(d.values); 
 
     }) 
 
     .enter() 
 
     .append('path') 
 
     .attr('d', arc) 
 
     .style("fill", function(d, i) { 
 
     return color(i); 
 
     }); 
 
    </script>

kaynak

2016-04-10 15:26:45 Mark

c3Js dağılım grafiği için düzen nasıl oluşturulur

cevap

İlgili konular