如何在D3js

Question

我制作了一张可重复使用的条形图＆＃34; barChart.js＆＃34;，并在我的＆＃34; main.js＆＃34;我用它来制作3个不同的图表。每个图表都有不同的y轴标签，我无法想象如何在我的＆＃34; main.js＆＃34;中更改y轴标签。文件。我在我的可重复使用的＆＃34; barChart.js＆＃34;中定义了y轴。 as：

var ylabel = g.selectAll(".tick text")
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 300 - margin.left)
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("Value");

g.select(".y.axis")
     .call(d3.axisLeft(yScale).ticks(10))
    .enter().append("ylabel");   

在我的＆＃34; main.js＆＃34;文件我试图改变标签来自＆＃34; Value＆＃34;在我的一张图表中以这样的速度加速：

var speed = d3.select('#speed')
        .datum(carData.speed.all())
        .call(speedBarChart);

    speed.select(".x.axis")
        .selectAll(".tick text")
        .attr("transform", "rotate(-45) translate(-7,0)");
    speed.select(".y.axis")
        .select("ylabel")
        .selectAll(".tick text")
        .text("Speed");

但显然它不起作用，关于我如何能做到这一点的任何想法我都在使用D3js V-4？

Answer 1

.y.axis的第二个选择是您当前在.x.axis对象的选择范围内。因此d3正在寻找X轴内的Y轴 - 它什么都不返回。

您需要一般选择速度图，然后依次选择每个轴。尝试将代码更新为以下内容：

var speed = d3.select('#speed')
    .datum(carData.speed.all())
    .call(speedBarChart);

speed.select(".x.axis")
    .selectAll(".tick text")
    .attr("transform", "rotate(-45) translate(-7,0)")

speed.select(".y.axis")
    .select("text")
    .text("Speed");