Question

我需要在折线图中以cx和cy显示标签y。以下代码无效。任何人都可以帮我搞清楚。感谢。

代码段：

     var labels = gnodes.append('text')
        .text(function(d){ return d.y;}) // display label y in cx and cy
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "black")
        .attr("cx", function(d) { return x(d.x); })
        .attr("cy", function(d) {return h - y(d.y); })

小提琴链接：http://jsfiddle.net/uds1uubt/

Answer 1

  
    //extend the lineChart1 by using the input data array for x and y values 
    function lineChart2(){
        
        var data = [{x: 0, y: 100}, {x: 10, y: 110}, {x: 20, y: 140},
            {x: 30, y: 30}, {x: 40, y: 80}, {x: 50, y: 75},
            {x: 60, y: 120}, {x: 70, y: 130}, {x: 80, y: 10}, {x: 90, y: 8}, {x: 100, y: 3}];
        
        var w = 900,h = 400,margin_x = 32,margin_y = 30;
        
        // in lineChart1 we used d3.max to find the maximum number and 0 for minimum. this only works with array of data. the dataset for lineChart2 contain object, so the d3 helper function wouldn't work. There are several approaches. 
        
        //method1  : Perhaps the most direct way is to affect a scan of the data and find the maximum values for both x and y. 
/*var xMax = 0, yMax = 0;
data.forEach(function(d) {
    if(d.x > xMax)
       xMax = d.x;
    if(d.y > yMax)
       yMax = d.y;
});*/
  // console.log(xMax,yMax);
        
 //method2    - This time you assign both x and y to the line of data points. This operation is very simple even when you're working with an array of objects.   
var ax = [];
var ay = [];
data.forEach(function(d,i){
     ax[i] = d.x;
     ay[i] = d.y;
})
var xMax = d3.max(ax);
var yMax = d3.max(ay);
 //console.log(xMax); console.log(yMax);

 //scales
y = d3.scale.linear().domain([0, yMax]).range([0 + margin_y, h - margin_y]);
x = d3.scale.linear().domain([0, xMax]).range([0 + margin_x, w - margin_x]);
           
        var svg = d3.select("body").append("svg:svg").attr("width", w).attr("height", h);
    
        

    
//As for the rest of the code, there is not much to be changed compared to lineChart1 —only a few corrections to the values of x and y bounds
// no x non y value
var g = svg.append("svg:g")
    .attr("transform", "translate(0," + h + ")");
 
// make changes to x and y values. x and y are objects. adjust appropriately
var line = d3.svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return -y(d.y); })

 //next step is to assign a line to a path element . draw the line of data points
g.append("svg:path").attr("d", line(data));
    
        
// draw the y axis
g.append("svg:line")
    .attr("x1", x(0))
    .attr("y1", -y(0))
    .attr("x2", x(0))
    .attr("y2", -y(yMax)-20)

//draw the x axis
g.append("svg:line")
    .attr("x1", x(0))
    .attr("y1", -y(0))
    .attr("x2", x(w))
    .attr("y2", -y(0))

/
g.selectAll(".xLabel")
    .data(x.ticks(10))
    .enter().append("svg:text")
    .attr("class", "xLabel")
    .text(String)
    .attr("x", function(d) { return x(d) })
    .attr("y", 0)
    .attr("text-anchor", "middle");
// draw the yLabels
  
g.selectAll(".yLabel")
    .data(y.ticks(5))
    .enter().append("svg:text")
    .attr("class", "yLabel")
    .text(String)
    .attr("x", 25)
    .attr("y", function(d) { return -y(d) })
    .attr("text-anchor", "end");
     
 //add the ticks to the axes. This is obtained by drawing a short line for each tick.   
//draw the x ticks
g.selectAll(".xTicks")
    .data(x.ticks(10))
    .enter().append("svg:line")
    .attr("class", "xTicks")
    .attr("x1", function(d) { return x(d); })
    .attr("y1", -y(0))
    .attr("x2", function(d) { return x(d); })
    .attr("y2", -y(0)-5)

// draw the y ticks
g.selectAll(".yTicks")
    .data(y.ticks(5))
    .enter().append("svg:line")
    .attr("class", "yTicks")
    .attr("y1", function(d) { return -y(d); })
    .attr("x1", x(0)+5)
    .attr("y2", function(d) { return -y(d); })
    .attr("x2", x(0))

//draw the x grid
g.selectAll(".xGrids")
    .data(x.ticks(5))
    .enter().append("svg:line")
    .attr("class", "xGrids")
    .attr("x1", function(d) { return x(d); })
    .attr("y1", -y(0))
    .attr("x2", function(d) { return x(d); })
    .attr("y2", -y(yMax)-10)

// draw the y grid
g.selectAll(".yGrids")
    .data(y.ticks(5))
    .enter().append("svg:line")
    .attr("class", "yGrids")
    .attr("y1", function(d) { return -1 * y(d); })
    .attr("x1", x(xMax)+20)
    .attr("y2", function(d) { return -1 * y(d); })
    .attr("x2", x(0));

   
      
g.append("svg:text")
        .attr("x", (w / 2))
        .attr("y", -h + margin_y )
        .attr("text-anchor", "middle")
        .style("font-size", "22px")
        .text("Line chart with x and y values");
        
        
        // adding labels to the axis
        
        g.append("svg:text")
        .attr("x", 25)
        .attr("y", -h + margin_y - 20)
        .attr("text-anchor", "end")
        .style("font-size", "11px")
        .text("No\'s");

        g.append("svg:text")
        .attr("x", w - 40)
        .attr("y", -8 )
        .attr("text-anchor", "end")
        .style("font-size", "11px")
        .text("Scores");
        
       
        // adding text to the marks
      var gnodes = svg.selectAll("g.node")
       .data(data)
       .enter().append("g");
        
        var node = gnodes.append('circle')
        .attr('class','node')
        .attr('r',20)
        .attr("cx", function(d) { return x(d.x); })
       .attr("cy", function(d) { return h - y(d.y); })
        .style('fill','red');
        
        var labels = gnodes.append('text')
        .text(function(d){ return d.y;})
        .attr("font-family", "sans-serif")
   .attr("font-size", "11px")
   .attr("fill", "black")
     .attr("x", function(d) { return x(d.x); })
       .attr("y", function(d) {return h - y(d.y); })  
    //.attr('x',function(d,i) { return x(i); })
    //.attr('y',function(d) { return -1 * y(d); });
     
;        
    
       
 };
        

    lineChart2();

   path {
    stroke: steelblue;
    stroke-width: 3;
    fill: none;
}

line {
    stroke: black;
}
    .xGrids {
    stroke: lightgray;
}
.yGrids {
    stroke: lightgray;
}
text {
    font-family: Verdana;
    font-size: 9pt;
}
    /* end of path css*/
.axisArrow {
    stroke: black;
    stroke-width: 1;
    /*fill: black; */
}

.dot {
    stroke: steelblue;
    fill: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

var labels = gnodes.append('text')
        .text(function(d){ return d.y;}) // display label y in cx and cy
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "black")
        .attr("cx", function(d) { return x(d.x); })
        .attr("cy", function(d) {return h - y(d.y); })

在上面的换行cx，cy到x，y。好。

D3.js中的标签问题

1 个答案: