Question

我的条形图/折线图上有一个问题，即当刷新数据时，左侧Y轴的刻度线从左向右改变方向。我确信我已经搞砸了一些简单的事情，因为我在D3进行了4天，但我看不出问题。

My code is in JFIDDLE here。我也把它添加到这篇文章中。谢谢你的帮助！

var data;

var margin = {
    top: 20,
    right: 80,
    bottom: 30,
    left: 50
},
width = 838 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.05);

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

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

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

var yAxisL = d3.svg.axis()
    .scale(yL)
    .orient("left")
    .ticks(10);

var yAxisR = d3.svg.axis()
    .scale(yR)
    .orient("right")
    .ticks(10);

var EfficiencyLine = d3.svg.line()
    .interpolate("basis")
    .x(function (d) {
    return x(d.xaxis);
})
    .y(function (d) {
    return yR(d.max_efficiency);
});

var svg = d3.select("#daychart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var which_data = Math.floor(Math.random() * 3) + 1
switch (which_data) {
    case 1:
        data = data1;
        break;
    case 2:
        data = data2;
        break;
    case 3:
        data = data3;
        break;
    default:
};

//d3.json("http://10.0.0.13/sma/sma-php/inverterdata.php?var=CDAY&id=C1200031", function (error, data) {
data.forEach(function (d) {
    d.max_energy = +d.max_energy;
    d.max_efficiency = +d.max_efficiency;    
});

x.domain(data.map(function (d) {
    return d.xaxis;
}));
yL.domain([0, d3.max(data, function (d) {
    return d.max_energy;
})]);

yR.domain([0, d3.max(data, function (d) {
    return d.max_efficiency;
})]);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .append("text")
    .attr("transform", "rotate(0)")
    .attr("y", 23)
    .attr("x", 340)
    .attr("dy", ".71em")
    .style("text-anchor", "bottom")
    .text("Timeline");

svg.append("g")
    .attr("class", "y axis")
    .call(yAxisL)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", -50)
    .attr("x", -145)
    .attr("dy", ".71em")
    .style("text-anchor", "top")
    .text("Energy - KWh");

svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + width + " ,0)")
    .call(yAxisR)
    .append("text")
    .attr("y", 50)
    .attr("x", -160)
    .attr("transform", "translate(" + width + " ,0)")
    .attr("transform", "rotate(-90)")
    .attr("dy", ".71em")
    .style("text-anchor", "top")
    .text("Efficiency - KWh/KW");

svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function (d) {
    return x(d.xaxis);
})
    .attr("width", x.rangeBand())
    .attr("y", function (d) {
    return yL(d.max_energy);
})
    .transition().delay(function (d, i) {
    return i * 10;
}).duration(10)
    .attr("height", function (d) {
    return height - yL(d.max_energy);
});

svg.append("path")
    .attr("d", EfficiencyLine(data))
    .attr("class", "EfficiencyLine");

//Create labels
svg.selectAll("text.label")
    .data(data)
    .enter()
    .append("text")
    .attr("class", "label")
    .text(function (d) {
    if (d.max_energy == 0) {
        return "";
    } else {
        return parseFloat(Math.round(d.max_energy * 100) / 100).toFixed(1);
    };
})
    .attr("x", function (d) {
    return x(d.xaxis) + x.rangeBand() / 2;
})
    .attr("y", function (d) {
    return yL(d.max_energy) - 2;
})
    .attr("text-anchor", "middle")
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "black");

//});

//On click, update with new data            
d3.select("p").on("click", function () {

    var which_data = Math.floor(Math.random() * 3) + 1
    switch (which_data) {
        case 1:
            data = data1;
            break;
        case 2:
            data = data2;
            break;
        case 3:
            data = data3;
            break;
        default:
    };

    // Get the data again
    //      d3.json("http://10.0.0.13/sma/sma-php/inverterdata.php?var=PDAY&id=P100023", function (error, data) {
    data.forEach(function (d) {
        d.max_energy = +d.max_energy;
        d.max_efficiency = +d.max_efficiency;
    });

    // Scale the range of the data again 
    x.domain(data.map(function (d) {
        return d.xaxis;
    }));
    yL.domain([0, d3.max(data, function (d) {
        return d.max_energy;
    })]);
    yR.domain([0, d3.max(data, function (d) {
        return d.max_efficiency;
    })]);

    svg.select("g.x").call(xAxis);
    svg.select("g.y").call(yAxisL);    <---- PROBLEM HERE IS SUSPECT?!
    svg.select("g.y").call(yAxisR);

    // Make the changes
    svg.selectAll(".bar") // change the bar
    .data(data) // Update the data within.
    .transition().delay(function (d, i) {
        return i / data.length * 1000;
    })
        .duration(500)
        .attr("x", function (d) {
        return x(d.xaxis);
    })
        .attr("y", function (d) {
        return yL(d.max_energy);
    })
        .attr("width", x.rangeBand())
        .attr("height", function (d) {
        return height - yL(d.max_energy);
    });

    svg.selectAll("path.EfficiencyLine") // change the EfficiencyLine
    .data(data) // Update the data within.
    .transition().delay(function (d, i) {
        return i / data.length * 1000;
    })
        .duration(500)
        .attr("d", EfficiencyLine(data));

    svg.selectAll("text.label")
        .data(data)
        .transition().delay(function (d, i) {
        return i / data.length * 1000;
    })
        .duration(500)
        .text(function (d) {
        if (d.max_energy == 0) {
            return "";
        } else {
            return parseFloat(Math.round(d.max_energy * 100) / 100).toFixed(1);
        };
    })
        .attr("x", function (d) {
        return x(d.xaxis) + x.rangeBand() / 2;
    })
        .attr("y", function (d) {
        return yL(d.max_energy) - 2;
    })

    //});

});

Answer 1

您的问题在于以下两行:(行号492-493）

svg.select("g.y").call(yAxisL);
svg.select("g.y").call(yAxisR);

你的解决方案是让两个y轴有两个不同的类，你可以通过将上面的行更改为：

svg.select("g.y-l").call(yAxisL);
svg.select("g.y-r").call(yAxisR);

并且还要改变

第386行：

.attr("class", "y-l axis")

第397行：

.attr("class", "y-r axis")

您需要一致的类名。

更新了工作小提琴is here

如果您需要任何额外的澄清，请告诉我，有两难等等。

D3JS轴方向在数据刷新时发生变化

1 个答案: