D3blackbox(function () { const axis = d3.axisLeft() .tickFormat(d => `${d3.format(".2s")(d)}`) .scale(this.props.scale) .ticks(this.props.data.length); d3.select(this.refs.anchor) .call(axis); })
componentDidMount(){ const tab = d3.select(this.refs.table); var tr = tab.selectAll('tr') .data(this.state.matrix) .enter().append('tr') tr.selectAll('td') .data(d => d) .enter().append('td') .text(d => d) }
d3.timeout(() => { d3.select('.bars').selectAll('.bar') .filter(d => years.indexOf(Number(d.year)) > -1) .classed('selected', true); }, this.transitionSpeed);
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(); });
this.text.transition(t).tween("text", function() { const selection = d3.select(this); const start = selection.text(); const interpolator = d3.interpolateNumber(start, total); return function(t) { selection.text(Math.round(interpolator(t))); }; });
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})`); }
function removeZoombox(gd) { d3.select(gd) .selectAll('.zoombox,.js-zoombox-backdrop,.js-zoombox-menu,.zoombox-corners') .remove(); }
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))
export default function chartFactory(opts, proto = protoChart) { const chart = Object.assign({}, proto, opts); chart.svg = d3.select('body') .append('svg') .attr('id', chart.id || 'chart') .attr('width', chart.width - chart.margin.right) .attr('height', chart.height - chart.margin.bottom); chart.container = chart.svg.append('g') .attr('id', 'container') .attr('transform', `translate(${chart.margin.left}, ${chart.margin.top})`); return chart; }
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); }
componentDidMount(){ let svg = d3.select(this.refs.circles); //bind and style the initial 3 circles. svg.selectAll('circle') .data(this.state.data) .style('fill', 'steelblue') .attr('r', d => Math.sqrt(d)) .attr('cx', (d,i) => i * 100 + 30) }
// 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) }
D3blackbox(function () { const axis = d3.axisLeft() .tickFormat(d => `${d3.format(".2s")(d)}`) .scale(this.props.scale) .ticks(this.props.data.length); d3.select(this.refs.anchor) .call(axis); })