Question

我正在制作比较折线图，绘制频率和频率。频率2反对字母。另外，我想要在两条线的节点处制作圆圈。但是，我在第一组线节点中得到了圆圈。我没有得到第二行的圈子。

如果我正在评论圈子的第一组代码，那么我可以在第二行看到红色圆圈。

请帮忙，这样我就可以看到第二行的红色圆圈，以及第一行的红色圆圈。

SNIPPET：

<html>

<head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>

</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

    <svg></svg>

    <script>

        //module declaration 
        var app = angular.module('myApp',[]);

        //Controller declaration
        app.controller('myCtrl',function($scope){

            $scope.svgWidth = 800;//svg Width
            $scope.svgHeight = 500;//svg Height 

            //Data in proper format 
            var data = [
                  {"letter": "A","frequency": "5.01", "frequency2":"18.03"},
                  {"letter": "B","frequency": "7.80", "frequency2":"15.03"},
                  {"letter": "C","frequency": "15.35","frequency2":"27.03"},
                  {"letter": "D","frequency": "22.70","frequency2":"12.03"},
                  {"letter": "E","frequency": "34.25", "frequency2":"21.03"},
                  {"letter": "F","frequency": "10.21","frequency2":"28.03"},
                  {"letter": "G","frequency": "7.68","frequency2":"09.03"},
            ];

                //removing prior svg elements ie clean up svg 
                d3.select('svg').selectAll("*").remove();

                //resetting svg height and width in current svg 
                d3.select("svg").attr("width", $scope.svgWidth).attr("height", $scope.svgHeight);

                //Setting up of our svg with proper calculations 
                var svg = d3.select("svg");
                var margin = {top: 20, right: 20, bottom: 30, left: 40};
                var width = svg.attr("width") - margin.left - margin.right;
                var height = svg.attr("height") - margin.top - margin.bottom;

                //Plotting our base area in svg in which chart will be shown 
                var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                //X and Y scaling 
                var x = d3.scaleBand().rangeRound([0, width]).padding(0.4);
                var y = d3.scaleLinear().rangeRound([height, 0]);

                x.domain(data.map(function(d) { return d.letter; }));
                y.domain([0, d3.max(data, function(d) { return +d.frequency; })]);

                //Final Plotting 

                //for x axis 
                g.append("g")
                    .call(d3.axisBottom(x))
                    .attr("transform", "translate(0," + height + ")");

                //for y axis 
                g.append("g")
                    .call(d3.axisLeft(y))
                    .append("text").attr("transform", "rotate(-90)").attr("text-anchor", "end");


            /**************** First Path ******************/ 

                //the line function for path 
                var lineFunction = d3.line()
                    .x(function(d) {return x(d.letter); })
                    .y(function(d) { return y(d.frequency); })
                    .curve(d3.curveLinear);

                //defining the lines
                var path = g.append("path");

                //plotting lines
                path
                    .attr("d", lineFunction(data))
                    .attr("stroke", "blue")
                    .attr("stroke-width", 2)
                    .attr("fill", "none")
                    .append("circle");


                g.selectAll('circle')
                  .data(data)
                  .enter().append('circle')
                  .attr('cx', function(d) {
                    return x(d.letter);
                  })
                  .attr('cy', function(d) {
                    return y(d.frequency);
                  })
                  .attr('r', 6)
                  .style("fill", "blue");

            /**************** Second Path *********************/ 

                //the line function for path 
                var lineFunction = d3.line()
                    .x(function(d) {return x(d.letter); })
                    .y(function(d) { return y(d.frequency2); })
                    .curve(d3.curveLinear);

                //defining the lines
                var path = g.append("path");

                //plotting lines
                path
                    .attr("d", lineFunction(data))
                    .attr("stroke", "red")
                    .attr("stroke-width", 2)
                    .attr("fill", "none")
                    .append("circle");


                g.selectAll('circle')
                  .data(data)
                  .enter().append('circle')
                  .attr('cx', function(d) {
                    return x(d.letter);
                  })
                  .attr('cy', function(d) {
                    return y(d.frequency2);
                  })
                  .attr('r', 6)
                  .style("fill", "red");

        });

    </script> 

</body> 

</html>

结果：

我想我在某个地方犯了一些愚蠢的错误。 Pl帮助。

Answer 1

这里有两个问题：

首先，当你为两组圈子执行此操作时：

g.selectAll('circle')

您的第二组正在选择现有元素，并且＆＃34;输入＆＃34;选择第二组将是空的。

尝试为每个组使用不同的选择器，如下所示：

//for the first group
g.selectAll('.circles1')

//for the second group
g.selectAll('.circles2')

第二个问题是，对于第二组圈子，您应该使用frequency2：

.attr('cy', function(d) {
    return y(d.frequency2);
})

这是一个有效的演示：

＆＃13;

var data = [
                  {"letter": "A","frequency": "5.01", "frequency2":"18.03"},
                  {"letter": "B","frequency": "7.80", "frequency2":"15.03"},
                  {"letter": "C","frequency": "15.35","frequency2":"27.03"},
                  {"letter": "D","frequency": "22.70","frequency2":"12.03"},
                  {"letter": "E","frequency": "34.25", "frequency2":"21.03"},
                  {"letter": "F","frequency": "10.21","frequency2":"28.03"},
                  {"letter": "G","frequency": "7.68","frequency2":"09.03"},
            ];

                //removing prior svg elements ie clean up svg 
                d3.select('svg').selectAll("*").remove();

                //resetting svg height and width in current svg 
                d3.select("svg").attr("width", 500).attr("height", 300);

                //Setting up of our svg with proper calculations 
                var svg = d3.select("svg");
                var margin = {top: 20, right: 20, bottom: 30, left: 40};
                var width = svg.attr("width") - margin.left - margin.right;
                var height = svg.attr("height") - margin.top - margin.bottom;

                //Plotting our base area in svg in which chart will be shown 
                var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                //X and Y scaling 
                var x = d3.scaleBand().rangeRound([0, width]).padding(0.4);
                var y = d3.scaleLinear().rangeRound([height, 0]);

                x.domain(data.map(function(d) { return d.letter; }));
                y.domain([0, d3.max(data, function(d) { return +d.frequency; })]);

                //Final Plotting 

                //for x axis 
                g.append("g")
                    .call(d3.axisBottom(x))
                    .attr("transform", "translate(0," + height + ")");

                //for y axis 
                g.append("g")
                    .call(d3.axisLeft(y))
                    .append("text").attr("transform", "rotate(-90)").attr("text-anchor", "end");


            /**************** First Path ******************/ 

                //the line function for path 
                var lineFunction = d3.line()
                    .x(function(d) {return x(d.letter); })
                    .y(function(d) { return y(d.frequency); })
                    .curve(d3.curveLinear);

                //defining the lines
                var path = g.append("path");

                //plotting lines
                path
                    .attr("d", lineFunction(data))
                    .attr("stroke", "blue")
                    .attr("stroke-width", 2)
                    .attr("fill", "none")
                    .append("circle");


                g.selectAll('.circles1')
                  .data(data)
                  .enter().append('circle')
                  .attr('cx', function(d) {
                    return x(d.letter);
                  })
                  .attr('cy', function(d) {
                    return y(d.frequency);
                  })
                  .attr('r', 6)
                  .style("fill", "blue");

            /**************** Second Path *********************/ 

                //the line function for path 
                var lineFunction = d3.line()
                    .x(function(d) {return x(d.letter); })
                    .y(function(d) { return y(d.frequency2); })
                    .curve(d3.curveLinear);

                //defining the lines
                var path = g.append("path");

                //plotting lines
                path
                    .attr("d", lineFunction(data))
                    .attr("stroke", "red")
                    .attr("stroke-width", 2)
                    .attr("fill", "none")
                    .append("circle");


                g.selectAll('.circles2')
                  .data(data)
                  .enter().append('circle')
                  .attr('cx', function(d) {
                    return x(d.letter);
                  })
                  .attr('cy', function(d) {
                    return y(d.frequency2);
                  })
                  .attr('r', 6)
                  .style("fill", "red");

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

＆＃13;

D3 - 多线图，第二行圆圈未显示

1 个答案: