Question

我是D3 JS的新手，正在寻找d3 JS中没有开箱即用的自定义解决方案。

下面的代码生成一个条形图，表示没有。对3个不同班级的学生，

问题，我可以显示圈而不是栏吗？请建议一些代码？谢谢！

//data
    let data = [{ "noOfStudents": 30, "ClassName": "Class 1" }, { "noOfStudents": 42, "ClassName": "Class 2" }, { "noOfStudents": 38, "ClassName": "Class 3" }];
    // set the dimensions and margins of the graph
    var margin = { top: 20, right: 20, bottom: 30, left: 40 },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    // set the ranges
    var x = d3.scaleBand().range([0, width]).padding(0.1);
    var y = d3.scaleLinear().range([height, 0]);

    var svg = d3.select("#chart").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 + ")");

    // get and format the data
    data.forEach(function (d) {
        d.noOfStudents = +d.noOfStudents;
    });

    // Scale the range of the data in the domains
    x.domain(data.map(function (d) { return d.ClassName; }));
    y.domain([0, d3.max(data, function (d) { return d.noOfStudents; })]);

    // append the rectangles for the bar chart
    svg.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function (d) { return x(d.ClassName); })
        .attr("width", x.bandwidth())
        .attr("y", function (d) { return y(d.noOfStudents); })
        .attr("height", function (d) { return height - y(d.noOfStudents); })
        .text(function (d) { return d.noOfStudents; });

    // add the x Axis
    svg.append("g").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x));

    // add the y Axis
    svg.append("g").call(d3.axisLeft(y));

Answer 1

而不是矩形，只需添加圆圈：

svg.selectAll(".bar")
    .data(data)
    .enter().append("circle")
    .attr("class", "bar")
    .attr("cx", function (d) { return x(d.ClassName); })
    .attr("cy", function (d) { return y(d.noOfStudents); })
    .attr("r", 30)
    .text(function (d) { return d.noOfStudents; });

并将您的频段比例更改为分数刻度：

var x = d3.scalePoint()
    .range([0, width])
    .padding(0.4);

这是一个小提琴：https://jsfiddle.net/kks4gcL3/

有什么方法可以让我在D3 JS中转换圈子

1 个答案: