0

我对这个 d3.js 的东西很陌生，我愿意学习它，我正在做一个网站，我需要在最后打开我的路径，我想向它添加一些工具提示，我已经阅读了网络上的文档很少，在我的代码中没有任何意义，任何人都可以对此有所了解，在此先感谢！:)

我的代码如下，它生成两个图形：

function getDateX(day2)
{
    day = new String(day2);
    return new Date(day.substring(0, 4) + '-' + day.substring(4, 6) + '-' + day.substring(6, 8));
}

function plotData(id, data, type)
{
    var margin = {top: 40, right: 15, bottom: 30, left: 55},
        width = 455,
        height = 270 - margin.top - margin.bottom;

    var x = d3.time.scale().range([0, width]);
    var y = d3.scale.linear().range([height, 0]);

    var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(data.length < 7 ? data.length : (data.length > 14 ? data.length / 5 : data.length / 3) ).tickFormat(d3.time.format("%d/%m"));
    var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);


    var area = d3.svg.area()    
        .x(function(d) { return x(getDateX(d.day)); })
        .y0(height)                 
        .y1(function(d) { return y( type == 'score' ? parseFloat(d.score) : d.good + d.neutral + d.bad)});


    var svg = d3.select("#" + id)
        .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
        .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.data(data);
    x.domain(d3.extent(data, function(d) { return getDateX(d.day); }));
    var min = d3.min(data, function(d) { return parseFloat(d.score); });

    if(min > 6)
        min = 6;
    else if(min > 1)
        min--;

    if(type == 'score')
        y.domain([min, 10]);
    else
        y.domain([0, d3.max(data, function(d) { return d.good + d.neutral + d.bad; })]);

    svg.append("path").datum(data).attr("class", "area").attr("d", area);
    svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);
    svg.append("g").attr("class", "y axis").call(yAxis);
}



var scores = 
[
<%
    boolean appendComma = false;
    for(MovieGrade grade : info.getGrades())
    {
        if(appendComma)
            out.print(",");
        else
            appendComma = true;
        out.print("{\"day\":" + grade.getDay() + ", \"good\":" + grade.getGood() + ", \"neutral\":" + grade.getNeutral() + ", \"bad\":" + grade.getBad() + ", \"score\":\"" + grade.getScore() + "\"}");
    }
%>
];


plotData('evolucao-score', scores, 'score');
plotData('evolucao-comments', scores, 'comments');
4

0 回答 0