Question

我有一个使用以下代码创建的图表。我想添加一个位于右侧的第二个y轴，它匹配相同的y比例。我想要右侧y轴的原因也是因为我设置的极限线为16.5，没有第二个y轴，图表看起来不正确。

<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文件。

[
{
    "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，稍后在绘制图表的函数中调用它。

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

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

当我这样做时，它只是将它绘制在与第一个yAxis相同的位置，当我调整变换/平移时它只是在图表上的随机位置绘制，我试图将它排成左边yAxis只位于右侧。感谢大家的投入。

Answer 1

语法错误：

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

要：

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

plnkr

D3柱形图上的第二个y轴

1 个答案: