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))
updateBarChart(newData) { const svgCanvas = select(this.refs.canvas); const bars = svgCanvas.selectAll('.bar').data(newData); bars .transition() .attr('height', (datapoint) => datapoint * scale) .attr('y', (datapoint) => canvasHeight - datapoint * scale); bars.exit().remove(); }
//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.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); });
// This function will be triggered on load function transition() { d3.selectAll("path") .data(function() { var d = layers1; layers1 = layers0; return layers0 = d; }) .transition() .duration(2500) .attr("d", area); }
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.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); })
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); });
svg.selectAll(".layer") .data(layers) .enter().append("g") .attr("class", "layer") .style("fill", function(d, i) { return color(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)"; });
groupsLayer.selectAll(".group") .data(graph.groups) .enter().append("rect") .attr("rx", 8).attr("ry", 8) .attr("class", "group") .attr("style", function (d) { return d.style; })