Question

文件＆＃34; LoanStats3a.csv＆＃34;在同一个文件夹中。但不知怎的，这是行不通的。此外，我正在考虑线条的x和y值，因为数量太大，但是，这应该为它们指定正常值。

    <html>


    <title>Loans</title>

<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>




    <style>
        #LoanStats3a{
           color: blueviolet; 


        }
        </style>
<body>
    <script>
        d3.csv("LoanStats3a.csv", function (file1){
            var bg = d3.select("body").append("svg")
                    .attr("width", 5000)
                    .attr("height", 5000);

            var data1 = [
              {x:d.loan_amnt , y : d.term},
                {x:d.int_rate , y : d.annual_inc},
                {x:d.member_id , y : d.id}




            ];

            var group = bg.append("g")
                    .attr("transform","translate (100,100)");
            var line = d3.svg.line("line")
                    .x(function (d) {return d.x /100;})
                    .y(function (d) {return d.y /100;});

        bg.selectAll("path")
    .data(file1)
    .enter()
    .append("line") 
    .attr("cx",500)
    .attr("cy",500)
    .attr("d", line)
    .attr("fill","black")
    .attr("stroke", "black")
    .attr("stroke-width", 20);

    }   );


    </script>

</body>
</html>

此外，这是我使用本地数据时仍然没有显示任何内容的代码：

    <html>


    <title>Loans</title>

<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>




    <style>
        #LoanStats3a{
           color: blueviolet; 


        }
        </style>
<body>
    <script>
        d3.csv("LoanStats3a.csv", function (file1){
            var bg = d3.select("body").append("svg")
                    .attr("width", 5000)
                    .attr("height", 5000);

            var data1 = [
              //{x:d.loan_amnt , y : d.term},
                //{x:d.int_rate , y : d.annual_inc},
                //{x:d.member_id , y : d.id}
                {x:10 , y:20},
                {x:30,y:40},
                {x:50 , y:60}




            ];

            var group = bg.append("g")
                    .attr("transform","translate (100,100)");
            var line = d3.svg.line()
                    .x(function (d) {return d.x /100;})
                    .y(function (d) {return d.y /100;});

        bg.selectAll("path")
    .data([data1])
    .enter()
    .append("line") 
    .attr("cx",500)
    .attr("cy",500)
    .attr("d", line)
    .attr("fill","black")
    .attr("stroke", "black")
    .attr("stroke-width", 20);

    }   );


    </script>

</body>
</html>

Answer 1

以下是您的问题的解决方案

你不是那么遥远

var svg = d3.select("body")
    .append("svg")
    .attr("width", 5000)
    .attr("height", 5000)
    .append("g")
    .attr("transform", "translate(100,100)");

var arc = d3.svg.arc()
    .innerRadius(80)
    .outerRadius(100)
    .startAngle(0)
    .endAngle((100 * Math.PI)-1);

svg.append("path")
    .attr("class", "arc")
    .attr("d", arc);

.arc {
  fill: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

为什么网页上没有显示任何内容？

1 个答案: