JavaScript-D3入门

最新推荐文章于 2024-07-18 10:23:58 发布

kagula086

最新推荐文章于 2024-07-18 10:23:58 发布

阅读量596

点赞数

分类专栏： JavaScript或前端

本文链接：https://blog.youkuaiyun.com/lee353086/article/details/79470627

版权

JavaScript或前端专栏收录该内容

44 篇文章

订阅专栏

把如何使用D3的最基本示例,放在了下面的html中.

d3.min.js可以从D3官网下载

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>测试D3_v4.3 增 删 改 功能</title>
    <!-- 通过这里的示例, 可以对d3库有个概念性的认识 -->
    <style>
        .kagula_stroke {
            stroke: black;
            stroke-width: 2px;
            stroke-dasharray: 5 5;
        }
    </style>
    <script src='/d3/d3.min.js'></script>
</head>

<body>

    <p>a</p>
    <p>b</p>
    <p>c</p>

    <table>
        <tr>
            <td>(1,1)</td>
            <td>(1,2)</td>
            <td>(1,3)</td>
        </tr>
        <tr>
            <td>(2,1)</td>
            <td>(2,2)</td>
            <td>(2,3)</td>
        </tr>
        <tr>
            <td>(3,1)</td>
            <td>(3,2)</td>
            <td>(3,3)</td>
        </tr>
    </table>

    <svg width="100%" height="150" version="1.1"
         xmlns="http://www.w3.org/2000/svg">
        <circle id="id_modify_demo4_1" cx="100" cy="30" r="25" stroke="black"
                stroke-width="2" fill="red" />

        <circle id="id_modify_demo4_2" cx="100" cy="100" r="40" stroke="black"
                stroke-width="2" fill="red" class="kagula_stroke" />
    </svg>

    <div id="addExample2">addExample2</div>
    <div id="add_demo3">add_demo3</div>
    <div id="add_demo4">add_demo4</div>
    <div id="add_demo5">add_demo5</div>

</body>
</html>



<script type="text/javascript">
//修改所有p标签的属性.
function modify_demo()
{
  var paragraphs = document.getElementsByTagName("p");
  for (var i = 0; i < paragraphs.length; i++) {
    var paragraph = paragraphs.item(i);
    paragraph.style.setProperty("color", "red", null);
  }
}

//修改所有p标签的属性, 对上面的代码做了改进,现在只需要一行.
function modify_demo2()
{
  d3.selectAll("p").style("color", "blue");
  //选择器类似jQuery可以是class name, 例如".myClassName"
  //              也可以是对象的id属性, 例如"#myObjectId"
  //也可以tag name, id,  class name混合.
}

//使用数组,修改所有p标签的属性.
function modify_demo3()
{
  d3.selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });
}

//使指定class有效,无效的演示
function modify_demo4() {
    d3.select("circle#id_modify_demo4_1").classed("kagula_stroke", true);
    d3.select("circle#id_modify_demo4_2").classed("kagula_stroke", false);
}

modify_demo4();

//使用数组,添加p标签,
//由于body里面只有三个p对象,所以这里根据数组的定义新添加了三个p对象.
function add_demo()
{
  //enter指的是添加不足部分.
  //text指的是添加text节点.
  //这里的select指的是body下面的p标签数量不足,则补足它.
  //最后一个select必须是selectAll!否则会变成body下新建6个p对象,不符合我们的真实意图.
  d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
    .text(function(d) { return "I’m number " + d + "!"; });
}

add_demo();

//添加对象,可以一长串.
function add_demo2() {
    //这里的html方法有点类似上面的text方法.
    d3.selectAll("div#addExample2").append("div").html("Wow").append("span").html("Even More Wow").style("font-weight", "900");
}

add_demo2();

//类似add_demo,这里加入了数据过滤功能.
function add_demo3() {
    var someNumbers = [17, 82, 9, 500, 40];
    //[82, 500, 40]
    var smallerNumbers = someNumbers.filter(function (d) { return d >= 40 });

    //注意,这里根据已经存在的html标签层级关系用多个select,
    //最后一个selectAll返回div#add_demo3下的所有div标签
    //数量不足数组部分,会用数组里的数据凑足.
    //d3.select("body").select("div#add_demo3").selectAll("div")
    //.data(smallerNumbers)
    //.enter()
    //.append("div")
    //.html(function (d) { return d + " is more than 40."; });

    //相对于上面注释的demo snippet
    //这里只用了一个select和一个selectAll,最后一个应该是selectAll返回符合条件的数组
    //因为数组是空的,所以,这里添加了三个节点.
    d3.select("div#add_demo3").selectAll("div")
    .data(smallerNumbers)
    .enter()
    .append("div")
    .html(function (d) { return d + " is more than 40."; });
}

add_demo3();

//不通过data() enter()加节点, 而是直接添加个节点.
function add_demo4() {
    d3.select("div#add_demo4").append("div")
    .style("border", "1px black solid")
    .html("hello world");
}
add_demo4();

//事件
function add_demo5() {
    d3.select("div#add_demo5")
        .style("background-color", "pink")
        .style("font-size", "24px")
        .attr("id", "newDiv")
        .on("click", () => { console.log("You clicked a div") });
}
add_demo5();

function update_demo()
{
  //更新p标签
  var p = d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
    .text(function(d) { return d; });

  //如果p标签相对于上面给出的数组不足,则增加p对象.
  // Enter…
  p.enter().append("p")
    .text(function(d) { return d + " ...enter..."; });
}

function update_demo2()
{
  //更新p标签
  var p = d3.select("body")
  .selectAll("p")
  .data([4, 8])
    .text(function(d) { return d; });

  //如果p标签比上面给出的数组数量还要多,则删除多余的.
  // Exit…
  p.exit().remove();
}

//更新td标签, 示例
function update_demo3()
{
	var k = 1;
	var third = d3.select("table").selectAll("tr").selectAll("td");
	third.style("background-color", function (d, col)
	{
	    console.log("col = " + col);//col = 0, 1, 2 => 第col+1列
		k = k == 1 ? 0 : 1;
		return k == 1 ? "grey" : "orange";
	});
}    
update_demo3();
    

</script>