矩形将不会显示在d3直方图上 [英] Rects won't show up on d3 histogram

问题描述

我使用Polymer来渲染一些d3图表。当Polymer初始渲染时，我只绘制一个带轴的图形，没有数据，因为数据稍后一旦API调用成功。但是，当我在svg中添加rect元素时，尽管它们显示在Chrome devtools元素检查器中，但它们不会显示在图表本身中。

I'm using Polymer to render some d3 charts. When the Polymer is initially rendered I only draw a graph with axes and no data, since the data comes later once the API calls succeed. However, when I get around to adding the 'rect' elements in the svg, despite them showing up in the Chrome devtools element inspector, they don't show up in the chart itself.

dataChanged: function() {
    var data = this.data;
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = this.width - margin.left - margin.right,
        height = this.height - margin.top - margin.bottom;

      // format the data
    data.forEach(function(d) {
        d.date = d3.isoParse(d.date);
    });

    // set the ranges
    var x = d3.scaleTime()
        .domain(d3.extent(data, function(d) { return d.date; }))
        .rangeRound([0, width]);
    var y = d3.scaleLinear()
        .range([height, 0]);

    var svg = d3.select(this.$.chart);

    var histogram = d3.histogram()
        .value(function(d) { return d.date; })
        .domain(x.domain())
        .thresholds(x.ticks(d3.timeMonth));

    var bins = histogram(data);

    y.domain([0, d3.max(bins, function(d) { return d.length; })]);


    var t = d3.transition()
        .duration(750)
        .ease(d3.easeLinear);

    svg.selectAll("rect")
        .data(bins)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", 1)
        .attr("transform", function(d) {
          return "translate(" + x(d.x0) + "," + y(d.length) + ")";
        })
        .attr("width", function(d) { return x(d.x1) - x(d.x0) -1 ; })
        .attr("height", function(d) { return height - y(d.length); });

    svg.select(".xAxis")
        .transition(t)
        .call(d3.axisBottom(x));

    svg.select(".yAxis")
        .transition(t)
        .call(d3.axisLeft(y));
},
ready: function() {
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = this.width - margin.left - margin.right,
        height = this.height - margin.top - margin.bottom;

    // set the ranges
    var x = d3.scaleTime()
        .domain([new Date(2010, 6, 3), new Date(2012, 0, 1)])
        .rangeRound([0, width]);
    var y = d3.scaleLinear()
        .range([height, 0]);

    // Add the SVG to my 'chart' div.    
    var svg = d3.select(this.$.chart).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

    // Add the X Axis
    svg.append("g")
        .attr("class","xAxis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    // Add the Y Axis
    svg.append("g")
        .attr("class","yAxis")
        .call(d3.axisLeft(y));
 }

当数组向下传递时， dataChanged（）正确渲染，具有正确的过渡和正确的尺寸，但是矩形没有。它们显示在chrome元素检查器中，具有0x17大小，即使这是他们看起来像：< rect class =barx =1transform =translate（0,24.06417112299465） width =101height =275.93582887700535< / rect>

The axes get rendered correctly, with the right transitions and the right dimensions, but the rects don't. They show up in the chrome element inspector with a 0x17 size, even though this is what they look like: <rect class="bar" x="1" transform="translate(0,24.06417112299465)" width="101" height="275.93582887700535"></rect>

推荐答案

在您的准备函数中，您正在抓取 div 创建 svg 元素添加 g 元素，然后将轴附加到 g 。

In your ready function, you are grabbing your div creating an svg element adding a g element and then appending your axis to that g.

在 dataChanged 函数中，您正在抓取 div 并附加 rects 。

In your dataChanged function, you are grabbing your div and appending rects to it.

查看断开连接？您不能将 svg 父项存储到HTML。

See the disconnect? You can't parent svg to HTML.

在准备 do this：

 var svg = d3.select(this.$.chart).append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g")
   .attr("id", "canvas")
   .attr("transform",
         "translate(" + margin.left + "," + margin.top + ")");

在 dataChanged ：

var svg = d3.select("#canvas");

这将允许你找到合适的 g 将您的rect附加到。

This will allow you to "find" the appropriate g to append your rects to.

这篇关于矩形将不会显示在d3直方图上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！