score:1
Accepted answer
Nice chart you have
How can I do the same type of selection but with a group of corresponding percentages ?
i said earlier you can add a class, select that class using
d3.selectAll(/*class_name*/).each(function(){})
then do something on each of that
if you using
d3.select('id')you just select one element
that its why it work on path, not on text with using #per1,#per2 etc what its that? why you not name it with same class or group it?
see this. i hope you will understand
var data = [
[[{name: "Bonpoint"}], [
{axis: "Coton", value: 1},
{axis: "Laine", value: 0.8},
{axis: "Cachemire", value: 0.6},
{axis: "Soie", value: 0.20},
{axis: "Angora", value: 0.20},
{axis: "Autres", value: 0.20},
{axis: "Nylon", value: 0},
{axis: "Acrylique", value: 0},
{axis: "Viscose", value: 0},
{axis: "Polyuréthane", value: 0},
{axis: "Polyester", value: 0.20}]],
[[{name: "Petit Bateau"}], [
{axis: "Coton", value: 1},
{axis: "Laine", value: 0.40},
{axis: "Cachemire", value: 0},
{axis: "Soie", value: 0},
{axis: "Angora", value: 0},
{axis: "Autres", value: 0},
{axis: "Nylon", value: 0},
{axis: "Acrylique", value: 0},
{axis: "Viscose", value: 0},
{axis: "Polyuréthane", value: 0},
{axis: "Polyester", value: 0.20}]],
[[{name: "Bobo Choses"}], [
{axis: "Coton", value: 1},
{axis: "Laine", value: 0.20},
{axis: "Cachemire", value: 0},
{axis: "Soie", value: 0},
{axis: "Angora", value: 0},
{axis: "Autres", value: 0},
{axis: "Nylon", value: 0.40},
{axis: "Acrylique", value: 0.40},
{axis: "Viscose", value: 0},
{axis: "Polyuréthane", value: 0},
{axis: "Polyester", value: 0}]],
[[{name: "BeBe"}], [
{axis: "Coton", value: 0.40},
{axis: "Laine", value: 0},
{axis: "Cachemire", value: 0},
{axis: "Soie", value: 0},
{axis: "Angora", value: 0},
{axis: "Autres", value: 0},
{axis: "Nylon", value: 0.20},
{axis: "Acrylique", value: 0.80},
{axis: "Viscose", value: 0.40},
{axis: "Polyuréthane", value: 0},
{axis: "Polyester", value: 0.80}]],
[[{name: "Familiar"}], [
{axis: "Coton", value: 1},
{axis: "Laine", value: 0.20},
{axis: "Cachemire", value: 0},
{axis: "Soie", value: 0},
{axis: "Angora", value: 0},
{axis: "Autres", value: 0},
{axis: "Nylon", value: 0},
{axis: "Acrylique", value: 0},
{axis: "Viscose", value: 0},
{axis: "Polyuréthane", value: 0},
{axis: "Polyester", value: 0.40}]],
[[{name: "Miki House"}], [
{axis: "Coton", value: 1},
{axis: "Laine", value: 0},
{axis: "Cachemire", value: 0},
{axis: "Soie", value: 0},
{axis: "Angora", value: 0},
{axis: "Autres", value: 0},
{axis: "Nylon", value: 0},
{axis: "Acrylique", value: 0},
{axis: "Viscose", value: 0},
{axis: "Polyuréthane", value: 0},
{axis: "Polyester", value: 0.40}]],
[[{name: "Uniqlo"}], [
{axis: "Coton", value: 1},
{axis: "Laine", value: 0.20},
{axis: "Cachemire", value: 0},
{axis: "Soie", value: 0},
{axis: "Angora", value: 0},
{axis: "Autres", value: 0},
{axis: "Nylon", value: 0},
{axis: "Acrylique", value: 0.20},
{axis: "Viscose", value: 0},
{axis: "Polyuréthane", value: 0.20},
{axis: "Polyester", value: 0.40}]],
[[{name: "Baby GAP"}], [
{axis: "Coton", value: 1},
{axis: "Laine", value: 0},
{axis: "Cachemire", value: 0},
{axis: "Soie", value: 0},
{axis: "Angora", value: 0},
{axis: "Autres", value: 0},
{axis: "Nylon", value: 0},
{axis: "Acrylique", value: 0.20},
{axis: "Viscose", value: 0},
{axis: "Polyuréthane", value: 0.20},
{axis: "Polyester", value: 0.40}]],
[[{name: "Lucien Zazou"}], [
{axis: "Coton", value: 0.80},
{axis: "Laine", value: 0},
{axis: "Cachemire", value: 0},
{axis: "Soie", value: 0},
{axis: "Angora", value: 0},
{axis: "Autres", value: 0},
{axis: "Nylon", value: 0},
{axis: "Acrylique", value: 0.20},
{axis: "Viscose", value: 0.20},
{axis: "Polyuréthane", value: 0},
{axis: "Polyester", value: 0.60}]],
];
var color = d3.scaleOrdinal().range(["#00baff", "#0014fe", "#00ff9c", "#f4bf02", "#ffa600", "#ff0000", "#ff00c4", "#ee693e", "#99958f"]);
radarChart(".radarChart", data);
function radarChart(id, data, options)
{
var cfg = {w: 700,
h: 700,
margin: {top: 20, right: 20, bottom: 20, left: 20},
levels: 5,
labelFactor: 1.35,
wrapWidth: 60,
opacityArea: 0.2,
dotRadius: 2,
opacityCircles: 0.1,
strokeWidth: 1,
roundStrokes: true,
areaName: "areaName",
ratio: 1.8,
color:function(d){
return 'black'
}
}
if('undefined' !== typeof options)
{for(var i in options)
{if ('undefined' !== typeof options[i]){cfg[i] = options[i]} } }
var maxValue = d3.max(data, function(i){return d3.max(i[1].map(function(o)
{return o.value}))} );
var minValue = d3.min(data, function(i) {return d3.min(i[1].map(function(o) {return o.value}))});
var areaName = cfg["areaName"];
// Variables for when creating the axis
var allAxis = (data[0][1].map(function(i, j) {return i.axis})),
total = allAxis.length, // autant d'axes que d''axis' indiqués dans data
radius = (cfg.h/3), //rayon du cercle le plus éloigné
innerRadius = (radius / cfg.levels) * cfg.ratio,
Format = d3.format('.0%'), //affiche en pourcentage, arrondi à l'entier
angleSlice = Math.PI * 2 / total; // L'écart entre chaque part de camembert
// Radius scale
var rScale =d3.scaleLinear().range([innerRadius,radius]).domain([0,maxValue]);
// Svg
var svg = d3.select("body")
.append("svg")
.attr("width", cfg.w + cfg.margin.left + cfg.margin.right)
.attr("height", cfg.h + cfg.margin.top + cfg.margin.bottom)
.attr("class", "radar");
// g
var g = svg.append("g")
.attr("transform", "translate(" + (cfg.w/2 + cfg.margin.left) + "," + (cfg.h/2 - cfg.margin.top) + ")");
// GRID
var axisGrid = g.append("g").attr("class", "axisWrapper");
// Grid variables
var inconnu = 2.13 //ratio: 1.8
var distance = cfg.ratio * inconnu ;
var step = distance / (cfg.levels + 1)
// drawing the Grid
axisGrid.selectAll(".levels")
.data(d3.range(0, distance, step)) //nombres et écart (1) de cercles à partir du centre
.append("circle")
.attr("class", "gridCircle")
.attr("r", function(d, i){return innerRadius + (radius /cfg.levels * d)})
.style("fill", "white")
.style("stroke", "lightgrey")
.style("stroke-width", 0.2)
.style("fill-opacity", 0);
// Axis displaying the percentages (not displayed atm)
axisGrid.selectAll(".axisLabel")
.data(d3.range(1, cfg.levels+1)) // à partir du 2è cercle jusqau'au 5ème
.enter()
.append("text")
.attr("class", "axisLabel")
.attr("x", -10)
.attr("y", function(d){return innerRadius + (radius /(cfg.levels * 1.575) * d)})
.attr("dy", "0.4em")
.style("font-size", "10px")
.attr("fill", "#737373")
.text(function(d,i) { return Format((d/cfg.levels))})
.style("display", "none");
// Drawing the axis
var axis = axisGrid.selectAll(".axis")
.data(allAxis)
.enter()
.append("g")
.attr("class", "axis");
axis.append("line")
.attr("x1", function(d, i){return rScale(0) * Math.cos(angleSlice*i - Math.PI/2) }) //x du point de départ des lignes
.attr("y1", function(d, i){return rScale(0) * Math.sin(angleSlice*i - Math.PI/2) }) //y du points de départ des lignes
.attr("x2", function(d, i){ return rScale(maxValue) * Math.cos(angleSlice*i - Math.PI/2); })
.attr("y2", function(d, i){ return rScale(maxValue) * Math.sin(angleSlice*i - Math.PI/2); })
.attr("class", "line")
.style("stroke", "lightgrey")
.style("stroke-width", 1)
.attr("display", "none");
// Legend (brand names)
var legende = svg.selectAll("noms")
.data(data)
.enter()
.append("text")
.text(function(d) {return d[0].map(function (o) {return o.name})})
.attr("class", "legende")
.style("font-family", "helvetica")
.style("fill-opacity", 0.8)
.attr("x", 0)
.attr("y", function (d,i) {return 12 + i * 20})
.attr("id", function (d,i) {return "leg" + i})
.style("font-size", 10)
.style("fill", function(d,i) { return color(i)})
.style("opacity", 1);
// Put all the percentages at the right place (opacity set to 0 atm)
var pourcents = g.selectAll(".pourcentage")
.data(data)
.enter()
.append("g")
.attr('class',function(d) {return d[0].map(function (o,i) {return "pourcentage"+d.name})})
// .attr("class","pourcentage");
pourcents.selectAll(".pourcentagetext")
.data(function(d,i) {return d[1]})
.enter().append("text")
.attr("x", function(d,i){ return rScale(d.value + 0.05)* Math.cos(angleSlice*i - Math.PI/2) })
.attr("y", function(d,i){ return rScale(d.value + 0.05) * Math.sin(angleSlice*i - Math.PI/2) })
.attr("id", function (d,i) {return "per" + i})
.attr("class", "per" + "pct" )
.style("font-size", 10)
.text(function (d,i) { if (d.value == 0) {"fill", "none"} else {return Format(d.value)}})
.style("opacity", 0);
// Drawing the lines of the blobs (polygonal shapes)
var radarLine = d3.radialLine()
.curve(d3.curveLinearClosed)
.radius(function(d) { return rScale(d.value); })
.angle(function(d,i) { return i*angleSlice });
if(cfg.roundStrokes) {radarLine.curve(d3.curveLinearClosed)}
var blobWrapper = g.selectAll(".radarWrapper")
.data(data)
.enter().append("g")
.attr("class", "radarWrapper");
//mouseover
var m_over= function(d,i,j){
d3.selectAll(".radarArea")
.transition().duration(100)
.style("fill-opacity", 0);
d3.selectAll(".radarStroke")
.transition().duration(100)
.style("stroke-width", 0);
d3.select("#tag" + i)
.transition()
.duration(100)
.style("fill-opacity", 1);
d3.selectAll(".cir" + i)
.transition()
.duration(100)
.style("fill-opacity", 1);
d3.selectAll(".cir_txt" + i)
.transition()
.duration(100)
.style("fill-opacity", 1);
d3.select(this).style("font-size", 12);
d3.selectAll(".cir_txt" + i).each(function (d,i) {return d3.select(this).style("opacity",1)})
d3.selectAll(".cir" + i).each(function (d,i) {return d3.select(this).style("opacity",1)})
d3.select("#tag" + i).each(function (d,i) {return d3.select("#per").style("opacity", 1)})
}
var m_out= function(d, i) {d3.selectAll(".radarArea")
.transition().duration(500)
.style("fill-opacity", cfg.opacityArea);
d3.selectAll(".radarStroke")
.transition().duration(500)
.style("stroke-width", 0.1);
d3.select("#tag" + i)
.transition()
.duration(700)
.style("fill-opacity", cfg.opacityArea);
d3.selectAll(".cir" + i).each(
function(d,i){
return d3.select(this).style("opacity",0)
}).transition()
.duration(700)
.style("fill-opacity", cfg.opacityArea)
d3.selectAll(".cir_txt" + i).each(
function(d,i){
return d3.select(this).style("opacity",0)
}).transition()
.duration(700)
.style("fill-opacity", cfg.opacityArea)
}
// Drawing the blobs
blobWrapper.append("g")
.attr("id", function (d,i) {return "tog" + i})
.append("path")
.attr("class", "radarArea")
.attr("d", function(d,i) { return radarLine(d[1])})
.style("fill", function(d,i) { return color(i); })
.style("fill-opacity", cfg.opacityArea)
.attr("id", function (d,i) {return "tag" + i})
.on("mouseover",m_over)
.on("mouseout",m_out);
// Drawing the strokes of the blobs
blobWrapper.append("path")
.attr("class", "radarStroke")
.attr("d", function(d,i) { return radarLine(d[1]); })
.style("stroke-width", 0.1)
.style("stroke", function(d,i) { return color(i); })
.style("fill", "none")
.attr("id", function (d,i) {return "rad" + i});
// Add points (small circles) at every blobs angles (not displayed atm)
data.forEach(function(d,i){
var idx = i
d3.select("#tog" + i).selectAll(".circle")
.data(function(d,i,j){return d[1]})
.enter()
.append('circle')
.attr('class', 'cir'+i )
.attr("r", cfg.dotRadius)
.attr("cx", function(d,i){ return rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2) })
.attr("cy", function(d,i){ return rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2); })
.style("fill", function(d,i,j) { if (d.value === 0) {return "none"} else {return cfg.color(j)}})
.style("fill-opacity", 0)
.style("fill", color(idx))
d3.select("#tog" + i).selectAll("text")
.data(function(d,i,j) {return d[1]})
.enter().append("text")
.attr('class', 'cir_txt'+i )
.attr("x", function(d,i){ return rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2) })
.attr("y", function(d,i){ return rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2); })
.style("fill", function(d,i,j) { if (d.value == 0) {return "none"} else {return cfg.color(j)}})
.style("fill-opacity", 1)
.attr("dx", -25)
//.attr("dy", -10)
.attr("text-anchor", "right")
.style("font-weight", "bold")
.text( function(d,i,j) { if (d.value == 0) {return "none"} else {return Format(d.value)}})
.style("fill-opacity", 0);
})
// Set a mouseover function for the legend
legende.on("mouseover",m_over)
.on("mouseout",m_out);
// Add a white circle at the center, inside the inner circle
var centercircle = g.append("circle").attr("r", innerRadius + 1.5).raise().style("fill", "white").style("opacity", 1).style("stroke-width", 1).style("stroke", "lightgrey");
// Names of the textiles (one at the end of each axis)
axis.append("text")
.attr("class", "legend")
.style("font-size", "11px")
.attr("text-anchor", "middle")
.attr("dy", "0.35em")
.attr("x", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice*i - Math.PI/2); })
.attr("y", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice*i - Math.PI/2); })
.text(function(d){return d})
.attr("id", function(d,i) {return "mat" + i});
}body {font-family: 'Open Sans', sans-serif;
font-size: 11px;
font-weight: 300;
fill: #242424;
text-align: center;
cursor: default;}
.legend {font-family: 'Open Sans', sans-serif;
fill: #333333;}
.tooltip {fill: #333333;}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="radarChart"></div>
</body>
</html>
Source: stackoverflow.com
Related Query
- How to display interactively percentages in d3?
- How do I display dates on the x-axis for nvd3 / d3.js?
- Using d3.js, how can I display data faster on my chart?
- How to dynamically display a multiline text in D3.js?
- Nvd3: How prevent to display chart between -1 and 1 if have all y values 0?
- How to display the value for the final tick on axis in D3?
- how to display name of node when mouse over on node in collapsible tree graph
- How to use SVG gradients to display varying colors relative to the size of the colored region
- How to force nvd3 to display the equal number of ticks as that of the values plotted on the graph-nvd3
- How do I display html encoded values in svg?
- How to display values on top of nvd3 multi par graph?
- How can I display a placeholder image in my SVG until the real image is loaded?
- How to display and hide links and nodes when clicking on a node in D3 Javascript
- How to display values in Stacked Multi-bar chart - nvd3 Graphs
- How to display a text when mouseover a node in D3 force layout
- How to display stacked data correctly with an nvd3.js multiBarChart
- How to display data as KB, MB, GB, TB on y axis
- How do I get D3 Data Driven Document to display a moment.js datetime in the correct time zone?
- How to display the percentage % on a NVD3 Pie Chart?
- How to display percentage to the d3.js piechart
- How to display rectangular div with data on mouse over event of any node in d3 js tree?
- How to display a legend in Plottable.js multiple plot
- D3 bar chart - how to display positive/negative values together?
- How to display value labels above graph bars?
- How to display property text on mouseover in d3 map
- How to change D3.format to display real number suffix instead of Byte suffix
- how to display bottom data for row chart using dc.js
- How do I build simple D3 charts that display massive amounts of data?
- How can I display two trees with a central root?
- How to display source nodes of a clicked target?
More Query from same tag
- D3 map displaying country name
- How drag and drop a circle in D3?
- copy an object doesn't effect on my code
- nvd3 trigger event brushend
- Find points under the brushed region
- Increasing rank spacing in graphviz
- Nested JSON loadings in D3.js
- Separating concerns with React and D3 when using variable scales
- How to place 3 d3.js charts in a row
- How to remove a paticular legend in D3
- How to access i'th shape's attributes using d3
- Javascript/d3 Function for creating new array from an array of arrays
- Capture mouseover in d3 on a leaflet map
- d3 issue with getting data out of a table created from a variable (works in D3.js v3.5.5 but not in v4.2.2)
- labels for circles not showing up in d3 data visualization
- updating D3js graph with json data
- Unrolling line in d3js Linechart
- Extracting an object from an array in Javascript
- Drawing a Multi Line Chart from nested data
- dc.js - Chart not rendering (single row bar chart - horizontal row), with the exception of legend, axes and tick marks/values (which do render)
- Image within circle object causes pixelation d3 js
- D3 Sankey Diagram. changing the link color and moving the node
- In d3 Force-Directed Graph, pull similar nodes together.
- How do I get a topojson layer to show up in leaflet using d3?
- Bounded force graph with labels d3.js
- Create node cluster's focal points by data attribute in d3?
- d3js Force Network: Ctrl-Click node to external link?
- Getting TypeError: .selectAll(...).enter is not a function with d3.js
- Resizing more than one svg graph on the same web page
- formatting a number with SI prefix change in version 4
