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(); }
function stylePies(d) { var trace = d[0].trace, pts = d3.select(this).select('g.legendpoints') .selectAll('path.legendpie') .data(Plots.traceIs(trace, 'pie') && trace.visible ? [d] : []); pts.enter().append('path').classed('legendpie', true) .attr('d', 'M6,6H-6V-6H6Z') .attr('transform', 'translate(20,0)'); pts.exit().remove(); if(pts.size()) pts.call(stylePie, d[0], trace); }
createBarChart(){ const node = this.node; const dataMax = max(this.props.data) const yScale = scaleLinear().domain([0, dataMax]).range([0, this.props.size[1]]) select(node) .selectAll('rect') .data(this.props.data) .enter() .append('rect') select(node) .selectAll('rect') .data(this.props.data) .exit() .remove() select(node) .selectAll('rect') .data(this.props.data) .attr("x", (d, i) => i * 25) .attr("y", d => this.props.size[1] - yScale(d)) .attr("height", d => yScale(d)) .attr("width", 25) }
updateChart() { let maxRadius = 40; let xScale = d3.scaleLinear().domain([0, 1]).range([0, this.props.width]); let yScale = d3.scaleLinear().domain([0, 1]).range([0, this.props.height]); let rScale = d3.scaleLinear().domain([0, 1]).range([0, maxRadius]); let u = d3.select(this.svgEl) .selectAll('circle') .data(this.state.data); u.enter() .append('circle') .attr('cx', 0.5 * this.props.width) .attr('cy', 0.5 * this.props.height) .style('fill', '#fff') .merge(u) .transition() .duration(1000) .attr('cx', d => xScale(d.x)) .attr('cy', d => yScale(d.y)) .attr('r', d => rScale(d.r)) .style('fill', d => colours[d.colour]); u.exit().remove(); }
const updatePie = () => { let arcs = chart .selectAll('.arc') .attr('transform', `translate(${this.radius},${this.radius})`) .data(pieChart(data)) arcs .exit() .remove() const enter = arcs .enter() .append('path') .attr('transform', `translate(${this.radius},${this.radius})`) .attr('class', 'arc') arcs = enter .merge(arcs) .attr('d', arcLayout) .attr('fill', (_, index) => this.colorScale.range()[index]) }
function styleBars(d) { var trace = d[0].trace, marker = trace.marker || {}, markerLine = marker.line || {}, barpath = d3.select(this).select('g.legendpoints') .selectAll('path.legendbar') .data(Plots.traceIs(trace, 'bar') ? [d] : []); barpath.enter().append('path').classed('legendbar', true) .attr('d', 'M6,6H-6V-6H6Z') .attr('transform', 'translate(20,0)'); barpath.exit().remove(); barpath.each(function(d) { var w = (d.mlw + 1 || markerLine.width + 1) - 1, p = d3.select(this); p.style('stroke-width', w + 'px') .call(Color.fill, d.mc || marker.color); if(w) { p.call(Color.stroke, d.mlc || markerLine.color); } }); }
function update(e) { console.lo path = path.data(d3_geom_voronoi(vertices)) path.enter().append("path") // drag node by dragging cell .call(d3.behavior.drag() .on("drag", function(d, i) { vertices[i] = {x: vertices[i].x + d3.event.dx, y: vertices[i].y + d3.event.dy} }) ) .style("fill", function(d, i) { return color(0) }) path.attr("d", function(d) { return "M" + d.join("L") + "Z"; }) .transition().duration(150).style("fill", function(d, i) { return color(d3.geom.polygon(d).area()) }) path.exit().remove(); circle = circle.data(vertices) circle.enter().append("circle") .attr("r", 0) .transition().duration(1000).attr("r", 5); circle.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); circle.exit().transition().attr("r", 0).remove(); link = link.data(d3_geom_voronoi.links(vertices)) link.enter().append("line") link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }) link.exit().remove() if(!simulate) force.stop() }
.on('mouseup', handleMouseOver); // ~ 'zoomend' paths.exit().remove(); });
function styleLines(d) { var trace = d[0].trace, showFill = trace.visible && trace.fill && trace.fill !== 'none', showLine = subTypes.hasLines(trace); var fill = d3.select(this).select('.legendfill').selectAll('path') .data(showFill ? [d] : []); fill.enter().append('path').classed('js-fill', true); fill.exit().remove(); fill.attr('d', 'M5,0h30v6h-30z') .call(Drawing.fillGroupStyle); var line = d3.select(this).select('.legendlines').selectAll('path') .data(showLine ? [d] : []); line.enter().append('path').classed('js-line', true) .attr('d', 'M5,0h30'); line.exit().remove(); line.call(Drawing.lineGroupStyle); }
trail.exit().remove();
.classed('button', true); buttons.exit().remove();
const groupWithData = group.selectAll('g.arc').data(data); groupWithData.exit().remove();
function styleBoxes(d) { var trace = d[0].trace, pts = d3.select(this).select('g.legendpoints') .selectAll('path.legendbox') .data(Plots.traceIs(trace, 'box') && trace.visible ? [d] : []); pts.enter().append('path').classed('legendbox', true) // if we want the median bar, prepend M6,0H-6 .attr('d', 'M6,6H-6V-6H6Z') .attr('transform', 'translate(20,0)'); pts.exit().remove(); pts.each(function(d) { var w = (d.lw + 1 || trace.line.width + 1) - 1, p = d3.select(this); p.style('stroke-width', w + 'px') .call(Color.fill, d.fc || trace.fillcolor); if(w) { p.call(Color.stroke, d.lc || trace.line.color); } }); }
createBarChart() { const node = this.node const dataMax = max(this.props.data) const yScale = scaleLinear() .domain([0, dataMax]) .range([0, this.props.size[1]]) select(node) .selectAll('rect') .data(this.props.data) .enter() .append('rect') select(node) .selectAll('rect') .data(this.props.data) .exit() .remove() select(node) .selectAll('rect') .data(this.props.data) .style('fill', '#fe9922') .attr('x', (d,i) => i * 25) .attr('y', d => this.props.size[1] - yScale(d)) .attr('height', d => yScale(d)) .attr('width', 25) }
createBarChart() { const node = this.node; const dataMax = max(this.props.data); const yScale = scaleLinear() .domain([0, dataMax]) .range([0, this.props.size[1]]); select(node) .selectAll('rect') .data(this.props.data) .enter() .append('rect'); select(node) .selectAll('rect') .data(this.props.data) .exit() .remove(); select(node) .selectAll('rect') .data(this.props.data) .style('fill', '#fe9922') .attr('x', (d,i) => i * 25) .attr('y', d => this.props.size[1] - yScale(d)) .attr('height', d => yScale(d)) .attr('width', 25); }