Question

我有一个数组买家，它由两个数组var buyers =[arrayOne, arrayTwo]组成，我用它来创建一组圆圈。我想根据它来自哪个数组来翻译每组圆圈的文本标签。理想情况下它看起来像这样（抱歉没有足够的代表附加图像）：

  文字文字[arrayOne - 圆圈上方的文字]
   （c）（c）
- - - - - - - x轴
   （c）（c）
   文本文本[arrayTwo - 圈下文字]

我正在使用以下代码生成圈子

  // svg container
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var buyerGroup = svg.selectAll('g')
        .data(buyers)
        .enter()
        .append('g')
        .attr('transform', function(d, i) {
            return "translate(0," + i*(height/4) + ")";
        });

    var buyerCircles = buyerGroup.selectAll(".circle")
        .data(function(d,i){
            return buyers[i];
        })
        .enter();

这与此问题的接受答案非常相似：https://stackoverflow.com/a/22768467/4765367

因为我已将数据绑定到buyerCircles，所以我不确定如何确定\查询我在“中”的数组，以便在附加文本时应用新的翻译。这是我用来将文字“标题”应用到我的圈子中的代码。这只会将文字标签放在圆圈上方。

buyerCircles.append("text")
        .text(function(d) {
               return(d.label);
        })
        .style("text-anchor", "middle")
        .style("font-weight","bold")
        .style("font-size", 18;
        })
        .attr("transform", function(d,i){
          return ("translate(" + xDomain(d.value) + "," + (height / 4 - 60) + ")" );
        });

任何建议都会有所帮助。

Answer 1

所以我能够通过引入一个名为labelNumber的buyerCircles范围之外的变量来实现这一点。

var labelNumber=0;

然后当我追加我的文本时，我将labelNumber增加1：labelNumber++; 然后在我的转换函数中，我包含一个引用labelNumber值的if语句：

attr("transform", function(d){
            labelNumber++;
             if (labelNumber>3)
                 return ("translate(" + xDomain(d.value) + "," + (height / 4 + 73) + ")" );
             else
                return ("translate(" + xDomain(d.value) + "," + (height / 4 - 45) + ")" );
         });

这可能不是最优雅的方式，但它确实有效。绝对对其他建议持开放态度。

d3.js根据数组索引将标题文本转换为圆圈上方或下方

1 个答案: