componentDidUpdate() { this.svgGroup .selectAll("rect") .filter((d, i) => i === this.props.index) .attr("fill", this.props.color); }
d3.timeout(() => { d3.select('.bars').selectAll('.bar') .filter(d => years.indexOf(Number(d.year)) > -1) .classed('selected', true); }, this.transitionSpeed);
d3.csv("dji.csv", function(error, csv) { if (error) throw error; var data = d3.nest() .key(function(d) { return d.Date; }) .rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; }) .map(csv); rect.filter(function(d) { return d in data; }) .attr("class", function(d) { return "day " + color(data[d]); }) .select("title") .text(function(d) { return d + ": " + percent(data[d]); }); });
svg.append("g") .attr("class", "y axis") .attr("transform", `translate(${width},0)`) .call(yAxis) .selectAll("g") .filter((value)=> !value) .classed("zero", true)
export default async function lifeExpectancyTable() { const getData = async () => { try { const response = await fetch('data/who-gho-life-expectancy.json'); const raw = await response.json(); return raw.fact.filter(d => d.dim.GHO === 'Life expectancy at birth (years)' && d.dim.SEX === 'Both sexes' && d.dim.YEAR === '2014') .map(d => [ d.dim.COUNTRY, d.Value, ]); } catch (e) { console.error(e); return undefined; } }; const data = await getData(); data.unshift(['Country', 'Life expectancy (years from birth)']); return tableFactory(data).table .selectAll('tr') .filter(i => i) .sort(([, yearsA], [, yearsB]) => yearsA - yearsB); }
data.forEach(function(d, i) { var geometryConfig = {}; geometryConfig.radialScale = radialScale; geometryConfig.angularScale = angularScale; geometryConfig.container = geometryContainer.filter(function(dB, iB) { return iB == i; }); geometryConfig.geometry = d.geometry; geometryConfig.orientation = axisConfig.orientation; geometryConfig.direction = axisConfig.direction; geometryConfig.index = i; geometryConfigs.push({ data: d, geometryConfig: geometryConfig }); });
.on('mouseenter', function (node) { const visibleEdges = view.visibleEdges.selectAll<SVGPathElement, Edge>('path'); const adjInputEdges = visibleEdges.filter(e => e.target === node); const adjOutputEdges = visibleEdges.filter(e => e.source === node); adjInputEdges.attr('relToHover', "input"); adjOutputEdges.attr('relToHover', "output"); .on('mouseleave', function (node) { const visibleEdges = view.visibleEdges.selectAll<SVGPathElement, Edge>('path'); const adjEdges = visibleEdges.filter(e => e.target === node || e.source === node); adjEdges.attr('relToHover', "none"); const adjNodes = adjEdges.data().map(e => e.target).concat(adjEdges.data().map(e => e.source));
.filter(function (node) { return (sequenceArray.indexOf(node) >= 0); })