使用d3.js过滤

时间:2015-09-02 11:12:22

标签: javascript json d3.js

我有一个大问题。

我使用d3来显示我的(民意调查)数据。 (所以问题和答案)除了一个问题外,它的工作正常。

有时它不会像现在这样可视化数据。例如,一次d3获得关于d3.json的所有正确数据。但图表不对。它应该在第一个栏中加载300个答案,但它只显示50.我测试了它并且json工作。 我试图过滤图表,我遇到了同样的问题。

这是我的d3代码。

<div>
    <script src="http://d3js.org/d3.v3.js"></script>
    <script>
        var margin = {
                top: 20,
                right: 30,
                bottom: 30,
                left: 430
            },
            width = 1400 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        var xScale = d3.scale.ordinal()
            .rangeRoundBands([0, width], .1);

        var yScale = d3.scale.linear()
            .range([height, 0]);

        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom");

        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left")
            .ticks(10);

        var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .attr("class", "chart");

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

        d3.json("getdata.php", function(error, data) {
            xScale.domain(data.map(function(d) {
                return d.text;
            }));
            yScale.domain([0, d3.max(data, function(d) {
                return d.count;
            })]);

            chart.selectAll(".bar")
                .data(data)
                .enter()

            .append("rect")
                .attr("class", "bar")
                .attr("x", function(d) {
                    return xScale(d.text);
                })
                .attr("y", function(d) {
                    return yScale(d.count);
                })
                .attr("height", function(d) {
                    return height - yScale(d.count);
                })
                .attr("width", xScale.rangeBand())

            chart.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

            chart.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Antworten");

        });

        function type(d) {
            d.count = +d.text;
            return d;
        }
    </script>
</div>

我想问题从这里开始。但我不知道为什么。问题不会出现在每个问题上。仅在少数时或当我尝试使用我的过滤器时。

当两个值有很大差异时,可能会发生这种情况吗?

更新: 这就像:D3不想失去最小的酒吧。所以其他的酒吧必须基于那个最小的。然后,对于较大的条形,值不正确。也许Y比例取决于最小的条形。

0 个答案:

没有答案