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。在您提供的JSFiddle中，没有类.service的html标记，因此当您计算该宽度时，它不知道您引用的是什么。所以宽度计算为0 - 20 - 75 = -95。宽度为负的图表不会显示出来。

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

来解决这个问题

2。在您的xAxis和yAxis中，您给出了巨大的值

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

和

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

所以你在整个图表中都有一个刻度线，将它全部涂黑了。所以我删除了那些。

现在您的图表正在显示：JSFiddle

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

1 个答案:

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

1 个答案:

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