16

我已经被这个问题困扰了好几天了。

所以我有一个以下形式的对象数据集:

dataset = [{metric:"revenue",value:0.03},{metric:"sales", value:0.15},{metric:"churn", value: 0.06},{metric:"logins", value: 0.45}]

以下代码将以网格模式显示 4 个度量名称(mesh、meshx 是网格的坐标点,meshsize 是网格的大小,所以这只是将文本放在网格正方形的中间):

svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d){
        return d.metric;
    })
    .attr("y",function(d,i){
        return meshy[i] + meshsize/2;
    })
    .attr("x", function(d,i){
        return meshx[i] + meshsize/2;
    })
    .attr("font-size",25)
    .attr("font-family","serif")
    .attr("text-anchor","middle")
    .attr("font-weight","bold");

现在我想将指标的值放在指标名称的正下方,如下所示:

 svg.append("text")
    .data(dataset)
    .text(function(d){
        return (d.value);
    })
    .attr("y",function(d,i){
        return meshy[i] + meshsize/2 + 20;
    })
    .attr("x", function(d,i){
        return meshx[i] + meshsize/2 ;
    })
    .attr("font-size",25)
    .attr("font-family","serif")
    .attr("text-anchor","middle")
    .attr("font-weight","bold");

但这仅返回 FIRST 指标的指标名称下方的值,其他 3 个值文本甚至不在 DOM 中。我尝试了多种方法,包括将 .text 替换为 .html ,如下所述:https ://github.com/mbostock/d3/wiki/Selections#wiki-html没有成功。我也尝试过附加段落元素 - 这可行,但 p 元素位于列表中 svg 主体的下方,没有明显的方法可以将它们移动到正确的位置。上面的代码是我得到的最接近我需要的代码,但由于某种原因,只显示了第一个值文本。但是,我对 d3 中完成工作的任何方法持开放态度:4 个指标名称,其下方的值

4

1 回答 1

42

在您的第二个代码块中,您只添加了一个text元素,因此只出现了其中一个。您需要做的是附加与您的第一个块类似的文本,即.enter()选择。为此,您有两个选择。您可以保存并重复使用.enter()所选内容,也可以为这两种文本分配不同的类以便能够区分它们。

选项1:

var texts = svg.selectAll("text")
                .data(dataset)
                .enter();

texts.append("text")
     .text(function(d){
                    return d.metric;
                })
     // set position etc.

texts.append("text")
     .text(function(d){
                    return d.value;
                })
     // set position etc.

选项 2:

svg.selectAll("text.title")
                .data(dataset)
                .enter()
                .append("text")
                .attr("class", "title")
                .text(function(d){
                    return d.metric;
                })
     // set position etc.

svg.selectAll("text.value")
                .data(dataset)
                .enter()
                .append("text")
                .attr("class", "value")
                .text(function(d){
                    return d.value;
                })
     // set position etc.

第一个选项显然更短,但根据你还想做什么,第二个选项可能更可取——如果你想在之后修改文本,如果你能区分这两种文本会容易很多. 您还可以使用不同的类来赋予不同的 CSS 样式。

于 2013-07-01T17:27:21.593 回答