componentDidUpdate() { this.svgGroup .selectAll("rect") .filter((d, i) => i === this.props.index) .attr("fill", this.props.color); }
svg.selectAll(".label") .data(graph.nodes) .enter().append("text") .attr("class", "label") .style('fill', 'black') .text(function (d) { return d.name; }) .call(cola.drag)
s.each(function(d) { // put xp and yp into d if pixel scaling is already done var x = d.xp || xa.c2p(d.x), y = d.yp || ya.c2p(d.y), p = d3.select(this); if(isNumeric(x) && isNumeric(y)) { // for multiline text this works better if(this.nodeName === 'text') p.attr('x', x).attr('y', y); else p.attr('transform', 'translate(' + x + ',' + y + ')'); } else p.remove(); });
updateSizes() { // since the map is drawn by using fixed points associated with the initial svg viewport, // one option is simply to provide a `scale transform` in the canvas/component <g> // without changing its width and height let width = this.chartContainer.clientWidth; let height = width * 0.618; let svg = d3.select(this.chartContainer).select("svg"); svg.attr("width", width) .attr("height", height); }
//.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);
function initializeBreadcrumbTrail() { // Add the svg area. let trail = d3.select("#sequence").append("svg:svg") .attr("width", width) .attr("height", 50) .attr("id", "trail"); // Add the label at the end, for the percentage. trail.append("svg:text") .attr("id", "endlabel") .style("fill", "#3f51b5"); //controls the color of the percentage }
// 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)"; });
// This is the SVG Canvas where the visualization is drawn // We can make height, width and id into dynamic properties setContext() { const { height, width, id} = this.props; return d3.select(this.refs.arc).append('svg') .attr('height', height) .attr('width', width) .attr('id', id) .append('g') .attr('transform', `translate(${height / 2}, ${width / 2})`); // Backticks are important! (Weird) }