Question

我在d3.js中创建了一个折线图，底部有一个面板（图表外部的一个div），在单个组中有一些文本和img等元素。我遇到的问题是将这些元素放在每个组中，它们似乎只是相互追随：

例如，我怎么能让他们看起来像我以前做的那样但对于外部div？我是否希望使用CSS格式？

（这就是我以前看过他们的方式，这是我有点想要的）

此外，这是我将每个元素附加到各自组的代码：

for(item in tweet_list) {
            var tweet = tweet_list[item];

            d3.select(".panel")
                .append("g")
                .attr("id", function(){return "p"+tweet['id_str'];})
                .attr("position", "absolute")
                .style("display", "block")
                .classed("panel-body", true);

            var group = d3.selectAll("#p"+tweet['id_str']+"");

            group.append("text")
                .text(function(){
                    var tweet_created_format = d3.timeFormat("%-I:%M%p, %e %b %Y")(d3.timeParse("%a %b %d %H:%M:%S %Z %Y")(tweet['created_at']));
                    return "@"+tweet['user']['screen_name']+"    ("+tweet_created_format+")";
                });

            group.append("img")
                .attr("width", 20)
                .attr("height", 20)
                .attr("src", function(d){return tweet['user']['profile_image_url']});

            group.append("text")
                .text(function(){
                    return tweet['text'];
                });

            group.append("img")
                .attr("src", "{{ url_for('static', filename = 'img/twitter-like.svg') }}");
            group.append("img")
                .attr("src", "{{ url_for('static', filename = 'img/twitter-retweet.svg') }}");

            group.append("text")
                .text(function(){
                    return tweet['retweet_count'];
                });
            group.append("text")
                .text(function(){
                    return tweet['favorite_count'];
                });
        }

Answer 1

你肯定需要使用css来设置推文的样式。另外一个不应该混合svg和html元素，例如。追加＆＃39; g＆＃39;到了一个＆＃39;。最后在d3中，您可以（并且应该）将数据绑定到选择而不是手动循环你想要的是这样的：

var tweetDivs = d3.select(".panel").selectAll('div.panel-body')
            .data(tweet_list)
            .enter()
            .append("div")
            .attr("id", function(d){return "p"+d['id_str'];})
            .classed("panel-body", true);


          tweetDivs.append("img")
            .attr("width", 20)
            .attr("height", 20)
            .attr("src", function(d){return d['user']['profile_image_url']})
            .attr('style', 'display: inline-block;')

          tweetDivs.append("p")
            .text(function(d){

                return "@"+d['user']['screen_name'];//+"    ("+tweet_created_format+")";
            })              
            .attr('style', 'display: inline-block;')

        tweetDivs.append("p")
            .text(function(d){
                return d['text'];
            })


        tweetDivs.append("img")
            .attr("src", "{{ url_for('static', filename = 'img/twitter-like.svg') }}");
        tweetDivs.append("img")
            .attr("src", "{{ url_for('static', filename = 'img/twitter-retweet.svg') }}");

        tweetDivs.append("p")
            .text(function(d){
                return d['retweet_count'];
            });
        tweetDivs.append("p")
            .text(function(d){
                return d['favorite_count'];
            });

编辑：修复了对html和svg标记的不可见引用。

d3.js / css：在div中定位元素

1 个答案: