第二个y轴在D3柱状图上 [英] Second y axis on D3 column chart

问题描述

我有一个用下面的代码创建的图表。我想添加一个位于右边的第二个y轴，它匹配相同的y刻度。我想要y轴在右边的原因也是因为我已经设置在16.5的限制线，图表只是不看起来没有第二个y轴。

I have a chart created with the code below. I want to add a second y axis positioned to the right which matches the same y scale. The reason I want the y axis on the right also is because of the limit line I have set at 16.5, the chart just doesn’t look right without the 2nd y axis.

<script>
var w = 800;
var h = 550;
var margin = {
    top: 58,
    bottom: 100,
    left: 80,
    right: 40
    };
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var threshold = 16.5;

var x = d3.scale.ordinal()
    .domain(data.map(function(entry){
    return entry.key;
}))
    .rangeBands([0, width],.2);
var y = d3.scale.linear()
    .domain([0, d3.max(data, function(d){
    return d.value;
})])
    .range([height, 0]);
var xAxis = d3.svg.axis()   
              .scale(x)
              .orient("bottom");
var yAxis = d3.svg.axis()
              .scale(y)
              .orient("left");                        
var yGridLines = d3.svg.axis()
                     .scale(y)
                     .tickSize(-width, 0, 0)
                     .tickFormat("")
                     .orient("left");
var svg = d3.select("body").append("svg")
    .attr("id", "chart")
    .attr("width", w)
    .attr("height", h);
var chart = svg.append("g")
    .classed("display", true)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

function plot(params){
this.append("g")
     .call(yGridLines)
     .classed("gridline", true)
     .attr("transform", "translate(0,0)")
this.selectAll(".bar")
    .data(params.data)
    .enter()
    .append("rect")
    .classed("bar", true)
    .attr("x", function (d,i){
        return x(d.key);
    })
    .attr("y", function(d,i){
        return y(d.value);
    })
    .attr("height", function(d,i){
        return height - y(d.value);
    })
    .attr("width", function(d){
        return x.rangeBand();
    });
this.selectAll(".bar-label")
    .data(params.data)
    .enter()
    .append("text")
    .classed("bar-label", true)
    .attr("x", function(d,i){
        return x(d.key) + (x.rangeBand()/2)
    })
    .attr("dx", 0)
    .attr("y", function(d,i){
        return y(d.value);
    })
    .attr("dy", -6)
    .text(function(d){
        return d.value;
    })
this.append("g")
 .classed("x axis", true)
 .attr("transform", "translate(" + 0 + "," + height + ")")
 .call(xAxis)
        .selectAll("text")
            .style("text-anchor", "end")
            .attr("dx", -8)
            .attr("dy" ,8)
            .attr("transform", "translate(0,0) rotate(-45)");

this.append("g")
     .classed("y axis", true)
     .attr("transform", "translate(0,0)")
     .call(yAxis);
this.select(".y.axis")
    .append("text")
    .attr("x", 0)
    .attr("y", 0)
    .style("text-anchor", "middle")
    .attr("transform", "translate(-50," + height/2 + ") rotate(-90)")
    .text("Downtime [Hrs]");

this.select(".x.axis")
    .append("text")
    .attr("x", 0)
    .attr("y", 0)
    .style("text-anchor", "middle")
    .attr("transform", "translate(" + width/2 + ",80)")
    .text("[Stations]");    
    // title 
this.append("text")
    .attr("x", (width / 2))             
    .attr("y", 0 - (margin.top / 2))
    .attr("text-anchor", "middle")  
    .style("font-size", "16px") 
    .style("text-decoration", "underline")  
    .text("Over Mould");  
    // limit line 
this.append("line")
    .attr("x1", 0)
    .attr("y1", y(threshold))
    .attr("x2", width)
    .attr("y2", y(threshold))
    .attr("stroke-width", 2)
     .attr("stroke", "yellow");
}
d3.json('data.json', function(data) {

plot.call(chart, {data: data});
});
</script>

数据来自外部JSON文件。

Data is coming from an external JSON file.

[
{
    "key": "ING_SW_CB",
    "value": "7"
},
{
    "key": "SB_SW_CB",
    "value": "15"
},
{
    "key": "NG3_SW_CB",
    "value": "3"
},
{
    "key": "Mould_Close",
    "value": "8"
},
{
    "key": "Leak_Test",
    "value": "9"
},
{
    "key": "ML_Load",
    "value": "2"
},
{
    "key": "Pre_Heat",
    "value": "1"
},
{
    "key": "Dispense",
    "value": "5"
},
{
    "key": "A310",
    "value": "6"
},
{
    "key": "Gelation",
    "value": "5"
},
{
    "key": "Platen",
    "value": "7"
},
{
    "key": "Mainline_Unload",
    "value": "8"
},
{
    "key": "De_mould",
    "value": "5"
},
{
    "key": "Clean_Up",
    "value": "4"
},
{
    "key": "Soda_Blast",
    "value": "5"
},
{
    "key": "RMI",
    "value": "15"
},
{
    "key": "Miscellaneous",
    "value": "5"
}
]

我的想法是创建yAxis2并在绘制图表的函数中调用它。

My idea was to create yAxis2 and call it later in the function that plots the chart.

var yAxis2 = d3.svg.axis()
              .scale(y)
              .orient("right");

this.append("g")
    .classed("y axis", true)
    .attr("transform", "translate(width,0)")
    .call(yAxis2);

当我这样做时，它只是绘制在与第一个yAxis相同的地方，当我调整transform / translate它只是在图表上的随机位置绘制，我试图排列像左侧yAxis只定位在右侧。感谢所有您的输入。

When I do this it just draws it in the same place as the first yAxis, when I adjust the transform/ translate it just gets drawn at random positions on the chart, I'm trying to line it up like the left yAxis only positioned on the right. Thanks to all for your input.

推荐答案

语法错误：

.attr("transform", "translate(width,0)")

$ b b

To：

To:

.attr("transform", "translate(" + width + ",0)")

plnkr

这篇关于第二个y轴在D3柱状图上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！