为什么我的可重复使用的d3.js图表​​未显示图表？

Question

该图表显示为空白的白色图表； 我知道它在那里，因为在生成图表时，页面会进行调整以适合图表。 区别在于没有轴或图表数据。

我正在尝试实现可重用的d3.js图表​​，但无法使其正常工作； 这是可重复使用的图表代码：

function chart() {
    var margin = {top: 50, right: 20, bottom: 50, left: 75};
    var width  = 400 - margin.left - margin.right;
    var height = 200 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

    var xScale = d3.time.scale();     // time series
    var yScale = d3.scale.linear();   // our float/int data points
    var xAxis = d3.svg.axis();
    var yAxis = d3.svg.axis();
    var vline = d3.svg.line();        // our data will use this line
    var varea = d3.svg.area();        // our data will fill this area

    function my(selection) {
        selection.each(function(data) {
            xScale
                .domain(d3.extent(data, function(d) { return parseDate(d.x); }))
                .range([0, width]);

            yScale
                .domain([0, d3.max(data, function(d) { return d.y; })])
                .range([height,0]);

            xAxis
                .scale(xScale)
                .orient("bottom")
                .ticks(12)
                .innerTickSize(-height)
                .outerTickSize(-height)
                .tickPadding(3);

            yAxis
                .scale(yScale)
                .orient("left")
                .ticks(6)
                .innerTickSize(-width)
                .outerTickSize(-width)
                .tickPadding(3)
                .tickFormat(d3.format(",d"));

            vline
                .x(function(d) { return xScale(parseDate(d.x)); })
                .y(function(d) { return yScale(d.y); });

            varea
                .x(function(d) { return xScale(parseDate(d.x)); })
                .y0(height)
                .y1(function(d) { return yScale(d.y); });

            // add SVG
            var svg = d3.select(this).selectAll("svg").data([data]);

            // make chart if it doesnt exist
            var gEnter = svg.enter().append("svg").append("g");
            gEnter.append("g").attr("class", "x axis");
            gEnter.append("g").attr("class", "y axis");
            gEnter.append("g").attr("path", "line");
            gEnter.append("g").attr("path", "area");

            svg
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom);

            var g = svg.select("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            g.select(".x.axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .selectAll("text")
                .style("text-anchor", "end")
                .attr("transform", function(d) {
                    return "rotate(-65)";
                });

            g.select(".y.axis")
                .call(yAxis);

            g.select(".line")
                .attr("d", vline(data));

            // draw area
            g.select(".area")
                .attr("d", varea(data));
        });
    }

    return my;
}

我这样称呼图表：

myData = [
  { 'x': "2015-11-19 17:37:31", 'y': 0 },
  ...
];

var c = chart();
d3.select("#blah").data(myData).call(c);

jsfiddle： https ://jsfiddle.net/auvdn4gh/5/

固定一个： https : //jsfiddle.net/auvdn4gh/11/

Answer 1

有几个原因。

1.在您提供的.service ，类.service没有html标记，因此在计算该宽度时，它不知道您在引用什么。 因此宽度计算为0-20-75 = -95。 宽度为负的图表将不会显示。

所以我首先通过设置width = 400 - margin.left - margin.right

2.在xAxis和yAxis ，给刻度线提供了巨大的价值

    .innerTickSize(-height)
    .outerTickSize(-height)

和

    .innerTickSize(-width)
    .outerTickSize(-width)

因此，您的刻度线一直延伸到整个图形，从而将其全部涂黑。 所以我删除了那些。

现在您的图形显示出来了： JSFiddle