[英]Append multiple 'text' elements in d3
I have a graph with an element which appears on mouseover, to which there is attached a circle, text and an svg:line as follows: 我有一个图表,其中有一个元素出现在鼠标悬停上,附有一个圆圈,文本和一个svg:行,如下所示:
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none")
var circleRadius = 4.5;
focus.append("circle")
.attr("r", circleRadius);
focus.append("text")
.attr("y", -9)
.attr("x", 0)
.style("text-anchor", "middle");
focus.append("svg:line")
.attr("x1", 0).attr("x2", 0) // vertical line so same value on each
.attr("y1", circleRadius).attr("y2", 200); // top to bottom
/*focus.append("text")
.attr("y", -2)
.attr("x", -20);*/
I want to add a second text element (the one currently commented out) but when I try to do that it won't render the first text element. 我想添加第二个文本元素(当前注释掉的那个),但是当我尝试这样做时,它不会呈现第一个文本元素。 Is there a way to append multiple elements of the same type to a group?
有没有办法将多个相同类型的元素附加到一个组? Also I need to be able to select them independently (as shown below, I have two focus.select('text') functions, one for each text element, and currently I can't distinguish them).
此外,我需要能够独立选择它们(如下所示,我有两个focus.select('text')函数,每个文本元素一个,目前我无法区分它们)。
Secondary question; 次要问题; the second text element is showing a time string in full format (eg Thu Jun 26 2014 08:30:00 GMT-0600 (Mountain Standard Time)).
第二个文本元素以完整格式显示时间字符串(例如,Thu Jun 26 2014 08:30:00 GMT-0600(Mountain Standard Time))。 Can I format this on the fly to get just the hour/minute/seconds?
我可以动态格式化以获得小时/分钟/秒吗? Currently the text elements get data from this code:
目前,文本元素从此代码中获取数据:
focus.select("text")
.text(d.temperature)
.attr("font-family", "NorWester")
.attr("font-size", 11);
focus.select("text")
.text(d.time)
.attr("y", function() { return (height - y(d.temperature)) })
.attr("font-family", "NorWester")
.attr("font-size", 11);
What SVG element is focus? 什么SVG元素是焦点? I think it must be a
g
to work with multiple text
elements. 我认为它必须是一个
g
与多个合作text
元素。
For the formatting, d3 has a neat function: 对于格式化,d3有一个简洁的功能:
var format = d3.time.format('%H:%M');
// ...
focus.select('text').text(function(d) {return format(d.time);});
Edit: Working jsfiddle demo, showing two texts elements inside a group: jsfiddle.net/PRvGC/ 编辑:工作jsfiddle演示,显示组内的两个文本元素: jsfiddle.net/PRvGC/
I had a similar issue recently when I wanted to create 4 rectangles with different properties. 最近,当我想要创建具有不同属性的4个矩形时,我遇到了类似的问题。 I solved this with HTML ids and selectAll.
我用HTML ids和selectAll解决了这个问题。 Here is an example:
这是一个例子:
var van = road.selectAll('#van').data([5]).enter()
.append('rect')
.attr('x', function(d) { return 300})
.attr('y', function(d) { return 100})
.attr('width', 30)
.attr('height', 15)
.style('fill', 'brown');
Time formatting in D3: https://github.com/mbostock/d3/wiki/Time-Formatting D3中的时间格式: https : //github.com/mbostock/d3/wiki/Time-Formatting
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.