Question

我的页面上有条形图。这是我在javascript上的条形码代码：

function drawFacilities(dataArray, id){
        var width = 1000, height = 500;
        var margin = {left: 250, right : 0, top: 20, bottom: 70}
        var verticalGap = 60;
        var horizontalGap = 10;
        var scaleMultiplier = 7;

        var widthScale = d3.scale.linear().domain([0, 100]).range([0,100])

        var colorScale = d3.scale.ordinal().domain([0,1,2,3,4,5,6])
                            .range(["#D7DF21","#FCB040","#F1592A","#0F75BC","#61CCEE","#C49A6C","#13A89E"])

        var canvas = d3.select(id).append("svg").attr("width",width).attr("height", height);

        canvas.append("line").attr("x1", margin.left).attr("y1", height - margin.bottom).attr("x2", width)
                .attr("y2", height - margin.bottom).attr("stroke-width", 2).attr("stroke", "#A6A7A6");

        canvas.append("line").attr("x1", margin.left).attr("y1", height - margin.bottom + 1)
                .attr("x2", margin.left).attr("y2", 5).attr("stroke-width", 2).attr("stroke", "#A6A7A6");



        canvas.selectAll(".facilitiesBar").append("rect").data(dataArray).enter().append("rect").attr("class", "facilitiesBar")
                .attr("width", function(d) { return widthScale(d) * scaleMultiplier;}).attr("height", 25)
                .attr("x", margin.left + 1).attr("y", function(d,i){ return margin.top + i * verticalGap;})
                .attr("fill", function(d,i){return colorScale(i);})

        var verticalLabel = ["Sports Field","Sports Instruments","Musical Instruments","Different types of competition",
                            "Scout,Girls/Boys Guide","No Instrument Available","Library"]

        canvas.selectAll(".facilitiesY").append("text")
              .data(verticalLabel).enter().append("text").text(function(d){return d}).attr("class", "facilitiesY")
                .attr("x", 0).attr("y", function(d,i){return margin.top + 20 + i * verticalGap})
                .attr("text-align", "left")

        var horizontalLabel = [1,2,3,4,5,6,7,8,9,10]
        canvas.selectAll(".facilitiesX").append("text").data(horizontalLabel).enter().append("text")
                 .text(function(d){return ""+d * 10;}).attr("class", "facilitiesX")
                 .attr("x", function(d){return (margin.left + 10 * d * scaleMultiplier);})
                 .attr("y", 450).attr("text-align", "left")

        canvas.append("text").text("(Response in %)").attr("x", 500).attr("y", 480)

}

该栏看起来像

我想在条形图上添加bar的值。例如，33,34将显示在特定栏中，如

我该怎么做？

Answer 1

为每个条形附加文本标签，并设置x，y值，如下所示。

printf("Enter Name: ");
scanf(temp->name,20,stdin);

printf("Enter Address: ");
scanf(temp->address,100,stdin);

printf("Enter Phone Number: ");
scanf("%s",&temp->phone);

＆＃13;

var textPadding = 15;
canvas.selectAll(".bartext")
  .data(dataArray)
  .enter()
  .append("text")
  .attr("class", "bartext")
  .attr("text-anchor", "middle")
  .attr("fill", "black")
  .attr("x", function(d, i) {
    return margin.left + textPadding + widthScale(d) * scaleMultiplier;
  })
  .attr("y", function(d, i) {
    return margin.top + 20 + i * verticalGap;
  })
  .text(function(d) {
    return d;
  });

＆＃13;

var id = "#container",
  dataArray = [10, 20, 45, 24, 36, 10, 26];
var width = 1000,
  height = 500;
var margin = {
  left: 250,
  right: 0,
  top: 20,
  bottom: 70
}
var verticalGap = 60;
var horizontalGap = 10;
var scaleMultiplier = 7;

var widthScale = d3.scale.linear().domain([0, 100]).range([0, 100])

var colorScale = d3.scale.ordinal().domain([0, 1, 2, 3, 4, 5, 6])
  .range(["#D7DF21", "#FCB040", "#F1592A", "#0F75BC", "#61CCEE", "#C49A6C", "#13A89E"])

var canvas = d3.select(id).append("svg").attr("width", width).attr("height", height);

canvas.append("line").attr("x1", margin.left).attr("y1", height - margin.bottom).attr("x2", width)
  .attr("y2", height - margin.bottom).attr("stroke-width", 2).attr("stroke", "#A6A7A6");

canvas.append("line").attr("x1", margin.left).attr("y1", height - margin.bottom + 1)
  .attr("x2", margin.left).attr("y2", 5).attr("stroke-width", 2).attr("stroke", "#A6A7A6");



canvas.selectAll(".facilitiesBar").append("rect").data(dataArray).enter().append("rect").attr("class", "facilitiesBar")
  .attr("width", function(d) {
    return widthScale(d) * scaleMultiplier;
  }).attr("height", 25)
  .attr("x", margin.left + 1).attr("y", function(d, i) {
    return margin.top + i * verticalGap;
  })
  .attr("fill", function(d, i) {
    return colorScale(i);
  })

var verticalLabel = ["Sports Field", "Sports Instruments", "Musical Instruments", "Different types of competition",
  "Scout,Girls/Boys Guide", "No Instrument Available", "Library"
]

canvas.selectAll(".facilitiesY").append("text")
  .data(verticalLabel).enter().append("text").text(function(d) {
    return d
  }).attr("class", "facilitiesY")
  .attr("x", 0).attr("y", function(d, i) {
    return margin.top + 20 + i * verticalGap
  })
  .attr("text-align", "left")

var horizontalLabel = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
canvas.selectAll(".facilitiesX").append("text").data(horizontalLabel).enter().append("text")
  .text(function(d) {
    return "" + d * 10;
  }).attr("class", "facilitiesX")
  .attr("x", function(d) {
    return (margin.left + 10 * d * scaleMultiplier);
  })
  .attr("y", 450).attr("text-align", "left")

canvas.append("text").text("(Response in %)").attr("x", 500).attr("y", 480);


var textPadding = 15;

canvas.selectAll(".bartext")
  .data(dataArray)
  .enter()
  .append("text")
  .attr("class", "bartext")
  .attr("text-anchor", "middle")
  .attr("fill", "black")
  .attr("x", function(d, i) {
    return margin.left + textPadding + widthScale(d) * scaleMultiplier;
  })
  .attr("y", function(d, i) {
    return margin.top + 20 + i * verticalGap;
  })
  .text(function(d) {
    return d;
  });

＆＃13;

如何在barChart上添加bar的值？

1 个答案: