Question

rect值的动态代码：

@Override
public Animator onCreateAnimator(int transit, boolean enter, int nextAnim) {
    if (nextAnim != 0x0) {
        Animator animator = AnimatorInflater.loadAnimator(getActivity(), nextAnim);
        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {}
            @Override
            public void onAnimationEnd(Animator animation) {
                // We just need know animation ending when fragment entered and no need to know when exited
                if (enter) {
                    // here add data to recyclerview adapter
                }
            }
            @Override
            public void onAnimationCancel(Animator animation) {}
            @Override
            public void onAnimationRepeat(Animator animation) {}
        });
        return animator;
    }
    return null;
}

结果如下：

view.post(new Runnable() {  
    @Override  
    public void run() {  
        windowManager.removeView(layout);
    } 
});

预期结果是：

 g.append('g')
                  .selectAll('g')
                  .data(data)
                  .enter()
                  .append('g')
                  .attr('transform', d => 'translate(' + x0(d.State) + ',0)')
                  .selectAll('rect')
                  .data(d => keys.map(key => {return {key: key, value: d[key]}}))
                  .enter().append('rect')
                  .attr('x', d => x1(d.key))
                  .attr('y', d => y(d.value))
                  .attr('width', x1.bandwidth())
                  .attr('height', d => innerHeight - y(d.value))
                  .attr('fill', d =>  z(d.key))
                  .append('text')
                  .text(function(d) { return d.value; })

我在每个区域之外都需要<g transform="translate(44,0)"><rect x="11" y="0" width="185" height="420" fill="#333333"></rect> <rect x="206" y="0" width="185" height="420" fill="#3490e9"> <text>1</text> </rect> <rect x="401" y="420" width="185" height="0" fill="#ff5a00"> <text>0</text> </rect> <rect x="596" y="420" width="185" height="0" fill="#9932CC"> <text>0</text> </rect> </g>。因为文本值未显示在条形图中。

我已经尝试过使用afterinsert进行尝试，但是没有运气

也尝试过

 <g transform="translate(44,0)">
        <rect x="11" y="0" width="185" height="420" fill="#333333"></rect>
        <text>1</text>
        <rect x="206" y="0" width="185" height="420" fill="#3490e9"> 
         </rect>
        <text>1</text>
        <rect x="401" y="420" width="185" height="0" fill="#ff5a00"> 
        </rect>
        <text>1</text>
        <rect x="596" y="420" width="185" height="0" fill="#9932CC">
          </rect>
        <text>0</text>
    </g>

但是它只会在g之外创建1 text

反正g.append('text') .text(function(d) { return d.value; })是我的text element

Answer 1

由于D3的方法链接，您将text元素嵌套在rect元素中，其中函数返回操作的元素（只要使用函数来设置值）。这意味着当您拥有看起来像您的链功能时（在此简化）：

.append('g')
...
.selectAll('rect').data([data]).enter()
.append('rect')
...
.append('text')

然后，您首先为数组中的每个数据点附加一个g元素，然后为每个rect元素附加一个text元素，然后为数组中的每个数据点附加一个rect元素

有两种方法可以到达想要去的地方。话虽如此，您不会获得概述的确切DOM表示，但是可以实现相同的效果。

我建议的方式是将rect和text元素成对地分组在每个数据点的g元素中，例如：

const outerG = g.append('g')
    .selectAll('g')
    .data(data)
    .enter()
    .append('g')
    .attr('transform', d => 'translate(' + x0(d.State) + ',0)')

const pairG = outerG.selectAll('g')
    .data(d => keys.map(key => {return {key: key, value: d[key]}}))
    .enter().append('g')
    
pairG.append('rect')
    .attr('x', d => x1(d.key))
    .attr('y', d => y(d.value))
    .attr('width', x1.bandwidth())
    .attr('height', d => innerHeight - y(d.value))
    .attr('fill', d =>  z(d.key))
    
pairG.append('text')
    .text(function(d) { return d.value; })

这将首先为每个数据点附加一个g元素，并将对这些g元素的引用存储在pairG中。然后，我们分别向rect变量附加一个text元素和一个pairG元素。之所以可行，是因为D3使g和rect元素可以使用用于附加前一个text的数据点。如果我们要执行新的.selectAll('foo').data([data]).enter().append('foo')序列，则情况并非如此，因为那样会引入新的数据点。

尽管我不确定，因为我无法访问所使用的数据，小数位数和变量，所以我插入的代码应该可以处理您的数据和设置。

创建rect后如何动态添加文本

1 个答案: