折线图

折线图

  const dataSet = [{
        country: 'China',
        group: [20, 40, 80, 30, 50, 60, 70, 20, 40, 80, 30, 50, 60, 70, 30]
    }, {
        country: 'English',
        group: [60, 50, 60, 70, 20, 40, 80, 30, 50, 40, 120, 30]
    }, {
        country: 'Japan',
        group: [60, 60, 70, 120, 40, 80, 30, 50, 60, 72, 40, 20]
    }];
    const width = 700, height = 500, padding = {top: 60, left: 30};
    const svg = d3.select("body").append("svg").attr("width", width + padding.left * 2).attr("height", height + padding.top * 2);
    const xScale = d3.scale.ordinal().domain(d3.range(R.pipe(R.sort(function (pre, cur) {
        return cur.group.length - pre.group.length;
    }), R.head, R.prop("group"), R.length)(dataSet))).rangeRoundBands([0, width], .3);
    var getLinearScale = R.pipe(R.sort(function (pre, cur) {
        return d3.max(cur.group) - d3.max(pre.group);
    }), R.head, R.prop("group"), d3.max);
    const yScale = d3.scale.linear().domain([0, getLinearScale(dataSet)]).range([height, 0]);
    const xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(8);
    const yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(8);
    const color = d3.scale.category10();
    svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding.left + "," + (height + padding.top) + ")").call(xAxis);
    svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding.left + "," + padding.top + ")").call(yAxis);
    const linePath = d3.svg.line().interpolate("basis").x(function (d, i) {
        console.log(xScale(i) + padding.left + xScale.rangeBand() / 2);
        return xScale(i) + padding.left + xScale.rangeBand() / 2;
    }).y(function (d) {
        return yScale(d) + padding.top;
    });
    svg.append("g").attr("class", "line").selectAll("path").data(dataSet).enter().append("path").attr("d", function (d) {
        return linePath(d.group);
    }).attr("fill", "none").attr("stroke", function (d, i) {
        return color(i);
    }).attr("stroke-width", 2);
    //    此处为了练习符号生成器使用了symbol以及定义了它的type,size访问器 **实际表图中建议使用rect**
    const symbolPath = d3.svg.symbol()
        .type(function (d) {
            return d3.svg.symbolTypes[d];
        }).size(180);
    svg.append("g").attr("class", "symbol").selectAll("path").data(dataSet).enter().append("path").attr("d", function (d, i) {
        return symbolPath(i)
//        因为path是路径元素 没有高宽 没法用x y来定位 只能用transform来移动
    }).attr("transform", function (d, i) {
        return "translate(" + ((i * 100) + padding.left + 30) + "," + (height + padding.top * 1.6) + ")";
    }).attr("fill", function (d, i) {
        return color(i);
    });
    svg.append("g").attr("class", "text").selectAll("text").data(dataSet).enter().append("text").text(function (d, i) {
        return d.country;
    }).attr("transform", function (d, i) {
        return "translate(" + ((i * 100) + padding.left + 70) + "," + (height + padding.top * 1.6) + ")";
    }).attr("dy", 5).attr("fill", function (d, i) {
        return color(i);
    }).attr("text-anchor", "middle");

---

结果:

折线图