Node.append("text") .attr("dy", ".31em") .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; }) .text(function(d) { return d.name; });
drawChart(){ const data = this.props.data; console.log(data) d3.select(this.refs.myDiv) .selectAll("div") .data(data) .enter() .append("div") .style("width", d => d + "px") .text(d => d); }
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]); }); });
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) }
// add labels enterText.append('text') .attr('x', (d, i) => this.state.padding.left + i * this.state.rectStep) .attr('y', d => this.props.height - d) .attr('dx', this.state.rectWidth / 2) .attr('text-anchor', 'middle') .style('fill', 'white') .style('font-size', '14px') .text(d => d);
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))
//mouse move trigger for crosshair function move(coords) { coordsText.text( timeAnnotation.format()(coords.x) + ", " + ohlcAnnotation.format()(coords.y) ); }
//Append the labels at each axis axis.append("text") .attr("class", "legend") .style("font-size", "11px") .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("x", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice*i - Math.PI/2); }) .attr("y", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice*i - Math.PI/2); }) .text(function(d){return d}) .call(wrap, cfg.wrapWidth);
node.append("title") .text(function (d) { return d.label; });
svg.selectAll(".label") .data(graph.nodes) .enter().append("text") .attr("class", "label") .style('fill', 'black') .text(function (d) { return d.name; }) .call(cola.drag)
Node.append("text") .attr("dy", ".3em") .style("text-anchor", "middle") .text(function(d) { return d.className.substring(0, d.r / 3); });
// update text updateText .attr('x', (d, i) => this.state.padding.left + i * this.state.rectStep) .attr('y', d => this.props.height - d) .attr('dx', this.state.rectWidth / 2) .attr('text-anchor', 'middle') .style('fill', 'white') .style('font-size', '14px') .text(d => d);
svg.selectAll(".age") .data(d3.range(0, age1 + 1, 5)) .enter().append("text") .attr("class", "age") .attr("x", function(age) { return x(year - age); }) .attr("y", height + 4) .attr("dy", ".71em") .text(function(age) { return age; })