g.selectAll("ellipse") .data([-150, 150]) .enter().append("ellipse") .attr("cx", function(d) { return d; }) .attr("cy", 0) .attr("rx", 10) .attr("ry", 7) .attr("fill", "#bbb");
d3.select('body') .append('div') .classed('buttons', true) .selectAll('.button') .data(this.scenes) .enter() .append('button') .classed('scene', true) .text(d => d.label) .on('click', d => this.loadScene(d)) .on('touchstart', d => this.loadScene(d))
//Draw the background circles axisGrid.selectAll(".levels") .data(d3.range(1,(cfg.levels+1)).reverse()) .enter() .append("circle") .attr("class", "gridCircle") .attr("r", function(d, i){return radius/cfg.levels*d;}) .style("fill", "#CDCDCD") .style("stroke", "#CDCDCD") .style("fill-opacity", cfg.opacityCircles) .style("filter" , "url(#glow)");
svg.selectAll(".node") .data(nodes) .enter().append("g") .attr("class", "nodeRT") .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
svg.selectAll(".label") .data(graph.nodes) .enter().append("text") .attr("class", "label") .style('fill', 'black') .text(function (d) { return d.name; }) .call(cola.drag)
svg.append("g") .attr("class", "lineMS") .selectAll("path") .data(elements) .enter().append("path") .style("stroke", function(d) { return color(d.value); }) .attr("d", function(d) { return line(d.indexes); }) .select(function() { return this.parentNode.insertBefore(this.cloneNode(false), this); }) .attr("class", "line-haloMS") .style("stroke", null) .on('mount', function(){});
svg.append("g") .attr("class", "hexagonsHB") .selectAll("path") .data(bins) .enter().append("path") .attr("d", hexbin.hexagon()) .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) .style("fill", function(d) { return color(d.length); });
componentDidMount(){ const svg = d3.select(this.refs.svg); let rect = svg.selectAll('rect') .data(this.state.data) .enter().append('rect') .attr('fill', 'green') .attr('height', 100) .attr('width', 100) // svg.selectAll('rect') // .attr('fill', 'blue') }
svg.selectAll(".layer") .data(layers) .enter().append("path") .attr("class", "layer") .attr("d", function(d) { return area(d.values); }) .style("fill", function(d, i) { return z(i); });
// could use transparent gradient overlay to vary raindrop color svg.selectAll("path") .data(d3.range(2000)) .enter().append("path") .attr("class", "pathRD") .attr("fill", "url(#gradient)") .attr("d", function() { return raindrop(10 + Math.random() * 250); }) .attr("transform", function(d) { return "rotate(" + d + ")" + "translate(" + (height / 3.8 + Math.random() * height / 5.2) + ",0)" + "rotate(90)"; });
//.style("filter" , "url(#glow)"); //Append the circles blobWrapper.selectAll(".radarCircle") .data(function(d,i) { return d; }) .enter().append("circle") .attr("class", "radarCircle") .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) { return cfg.color(j); }) .style("fill-opacity", 0.8);
svg.selectAll(".group") .data(graph.groups) .enter().append("rect") .attr("rx", 8).attr("ry", 8) .attr("class", "group") .style("fill", function (d, i) { return color(i); })
birthyear.selectAll("rect") .data((birthyear) => (data.get(year).get(birthyear)) || [0, 0]) .enter().append("rect") .attr("x", -barWidth / 2) .attr("width", barWidth) .attr("y", y) .attr("height", (value) => height - y(value))
svg.selectAll(".group") .data(graph.groups) .enter().append("rect") .attr("rx", 8).attr("ry", 8) .attr("class", "group") .style("fill", function (d, i) { return color(i); })