绘制一个散点五角星

var xAxisWidth = 500, yAxisWidth = 500, padding = {top: 40, left: 40},
        dataSet = [[100, 0], [159, 181], [5, 69], [195, 69], [41, 181]];
    var svg = d3.select("body").append("svg").attr("width", xAxisWidth + padding.left * 2).attr("height", yAxisWidth + padding.top * 2);
    var xScale = d3.scale.linear().domain([0, 1.2 * d3.max(dataSet, function (d) {
        return d[0];
    })]).range([0, xAxisWidth]);
    var yScale = d3.scale.linear().domain([0, 1.2 * d3.max(dataSet, function (d) {
        return d[1];
    })]).range([yAxisWidth, 0]);
    var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
    var yAxis = d3.svg.axis().scale(yScale).orient("left");
    svg.append("g").attr('class', 'axis').attr('transform', 'translate(' + padding.left + ',' + (yAxisWidth + padding.top) + ')').call(xAxis);
    svg.append("g").attr('class', 'axis').attr('transform', 'translate(' + padding.left + ',' + (padding.top) + ')').call(yAxis);
    var compute = d3.scale.category20();
    svg.selectAll("circle").data(dataSet).enter().append("circle").attr('r', 10).attr('cx', function (d) {
        return xScale(d[0]) + padding.left;
    }).attr("cy", function (d) {
        return yScale(d[1]) + padding.top;
    }).attr("fill", function (d, i) {
        return compute(i);
    });
    //    线段生成器
    var linePath = d3.svg.line()
    //        定义线段生成器的插值模式 可以去api中查其他模式
        .interpolate("cardinal-closed")
        //        自定义访问器规则
        .x(function (d) {
            return xScale(d[0]) + padding.left
        })
        //        自定义访问器规则
        .y(function (d) {
            return yScale(d[1]) + padding.top;
        });
    //    使用线段生成器绘制一个五角星
    svg.append("path").attr("d", linePath(dataSet)).attr("stroke", "purple").attr("stroke-width", 3).attr("fill", 'none');

结果:

image.png