使用自定义刻度创建可缩放的 Y 轴

Question

我目前有一个条形图，每个学校都有一个条形图。我已经用编号的刻度制作了 X 轴，但现在我想添加一个 Y 轴，将每个学校标记在其各自的栏旁边。

这是学校的数组：

var schoolArray = ["Berkeley", "Brown", "Caltech", "CMU", "College of William and Mary", "Columbia", "Cornell",
    "Dartmouth", "Gatech", "JHU", "MIT", "Northwestern", "NYU", "Notre Dame", "OSU", "Princeton", "PSU", "Purdue", "Rice",
    "RPI", "Rutgers", "Stanford", "U. of Chicago", "U. of Wisconsin Madison", "UCB", "UCDavis", "UCI", "UCLA", "UCR", "UCSB",
    "UCSC", "UCSD", "UF", "UIUC", "Umich", "UMN", "UNC", "Upenn", "USC", "Utah", "UTAustin", "Uva", "UW", "Vanderbilt", "WUSTL", "Yale"]

我还做了一个值/键数组：

var combined = [
    {"val": 17, "key": "Berkeley"}, {"val": 18, "key": "Brown"},
    {"val": 23, "key": "Caltech"}, {"val": 17, "key": "CMU"},
    {"val": 9, "key": "College of William and Mary"}, {"val": 22, "key": "Columbia"},
    {"val": 22, "key": "Cornell"}, {"val": 22, "key": "Dartmouth"},
    {"val": 16, "key": "Gatech"}, {"val": 18, "key": "JHU"},
    {"val": 14, "key": "MIT"}, {"val": 12, "key": "Northwestern"},
    {"val": 14, "key": "NYU"}, {"val": 11, "key": "Notre Dame"},
    {"val": 14, "key": "OSU"}, {"val": 15, "key": "Princeton"},
    {"val": 12, "key": "PSU"}, {"val": 17, "key": "Purdue"},
    {"val": 21, "key": "Rice"}, {"val": 14, "key": "RPI"},
    {"val": 11, "key": "Rutgers"}, {"val": 25, "key": "Stanford"},
    {"val": 13, "key": "U. of Chicago"}, {"val": 22, "key": "U. of Wisconsin Madison"},
    {"val": 16, "key": "UCB"}, {"val": 12, "key": "UCDavis"},
    {"val": 18, "key": "UCI"}, {"val": 16, "key": "UCLA"},
    {"val": 18, "key": "UCR"}, {"val": 17, "key": "UCSB"},
    {"val": 15, "key": "UCSC"}, {"val": 18, "key": "UCSD"},
    {"val": 11, "key": "UF"}, {"val": 18, "key": "UIUC"},
    {"val": 18, "key": "Umich"}, {"val": 13, "key": "UMN"},
    {"val": 10, "key": "UNC"}, {"val": 18, "key": "Upenn"},
    {"val": 23, "key": "USC"}, {"val": 15, "key": "Utah"},
    {"val": 20, "key": "UTAustin"}, {"val": 17, "key": "Uva"},
    {"val": 21, "key": "UW"}, {"val": 11, "key": "Vanderbilt"},
    {"val": 14, "key": "WUSTL"}, {"val": 17, "key": "Yale"}
    ]

这是高度比例，yAxis 并附加到画布上：

//There are 46 total schools
var heightScale = d3.scale.linear()
                    .domain([0, 46])
                    .range([0, height]);
var yAxis = d3.svg.axis()
              .scale(heightScale)
              .orient("left")
              .ticks(46);
canvas.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0, 0)")
        .call(yAxis);

我不知道这是否有用，但这里是与 xAxis 相关的代码：

var widthScale = d3.scale.linear()
                    .domain([0, 25])
                    .range([0, width]);
var xaxis = d3.svg.axis()
                    .ticks("20")
                    .scale(widthScale);
var canvas = d3.select("body")
                    .append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .append("g")
                    .attr("transform", "translate(50, 0)");

var bars = canvas.selectAll("rect")
                    .data(dataArray)
                    .enter()
                    .append("rect")
                    .attr("width", function(d) {return widthScale(d)})
                    .attr("height", 6)
                    .attr("fill", function(d) {return color(d)})
                    .attr("y", function(d, i) {return i * 15});

canvas.append("g")
        .attr("transform", "translate(0, 690)")
        .call(xaxis);

Answer 1

您需要在 y 轴上切换到 ordinal scale：

var heightScale = d3.scale.ordinal()
  .rangeRoundBands([0, height], .1) //<-- separate bars with a padding
  .domain(schoolArray); //<-- domain is our text array of schools

以后使用这个刻度设置y位置时，需要传入属于那个bar的学校名称，所以不要使用：

.attr("y", function(d, i) {return i * 15}); 

而是（注意我传递的是combinded而不是dataarray：

var bars = canvas.selectAll("rect")
  .data(combinded)
  .enter()
  .append("rect")
  .attr("width", function(d) {return widthScale(d.val)})
  .attr("height", heightScale.rangeBand() ) //<-- can use rangeBand here which is a computed height based on number of bars, height of graph and padding
  .attr("fill", function(d) {return color(d)})
  .attr("y", function(d, i) {return heightScale(d.key)});