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位置时，您需要传入属于该栏的学校名称，因此请勿使用：

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

而是（ note 我将传递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)});

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

1 个答案: