D3.js 可视化从入门到精通

第一章 Hello world

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
  </body>
  <script>
    var h3 = d3.select("body").selectAll("h3");
    h3.text("日照香炉生紫烟");
  </script>
</html>

第二章数据绑定

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>datum</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
  </body>

  <script>
    var lyrics = [
      "我是一只小小小小鸟",
      "想要飞呀飞却飞也飞不高",
      "我寻寻觅觅寻寻觅觅一个温暖的怀抱",
      "这样的要求算不算太高",
    ];
    var h3 = d3.selectAll("h3");
    h3.data(lyrics).text(function (v, i) {
      return "我是第" + i + "个h3标签，内容是：" + v;
    });

    //    运行结果如下：
    //    我是第0个h3标签，内容是：我是一只小小小小鸟
    //    我是第1个h3标签，内容是：想要飞呀飞却飞也飞不高
    //    我是第2个h3标签，内容是：我寻寻觅觅寻寻觅觅一个温暖的怀抱
    //    我是第3个h3标签，内容是：这样的要求算不算太高
  </script>
</html>

第三章数据更新

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <h2>《执迷不悔》</h2>

    <h3></h3>
    <h3></h3>
    <h3></h3>
  </body>
  <script>
    var lyrics = [
      "我不是你们想的如此完美",
      "我承认有时也会辨不清真伪",
      "并非我不愿意走出迷堆 只是这一次",
      "这次是自己(而)不是谁",
      "要我用谁的心去体会 真真切切地感受周围",
      "就算痛苦 就算是泪 也是属于我的伤悲",
      "我还能用谁的心去体会 真真切切地感受周围",
      "就算疲倦 就算是累 也只能执迷(而)不悔",
    ];

    var h3 = d3.select("body").selectAll("h3");
    //    var h3 = d3.selectAll('h3');

    var updata = h3.data(lyrics);
    var enter = updata.enter();
    console.log(updata);
    console.log(enter);

    updata.text(function (v, i) {
      return v;
    });

    //    代码执行到这里 页面所展示内容如下
    //
    //    执迷不悔
    //    我不是你们想的如此完美
    //    我承认有时也会辨不清真伪
    //    并非我不愿意走出迷堆 只是这一次

    //因为h3标签不够  所以需要先添加h3标签 再给新添加的h3标签绑定后续的数据

    var addH3 = enter.append("h3"); //注意 这里是往enter中插入h3
    console.log(enter);
    addH3.text(function (v, i) {
      //给新添加的h3标签 绑定数据
      return v;
    });

    //    执行到这里 页面展示内容如下
    //
    //    《执迷不悔》
    //    我不是你们想的如此完美
    //    我承认有时也会辨不清真伪
    //    并非我不愿意走出迷堆 只是这一次
    //    这次是自己(而)不是谁
    //    要我用谁的心去体会 真真切切地感受周围
    //    就算痛苦 就算是泪 也是属于我的伤悲
    //    我还能用谁的心去体会 真真切切地感受周围
    //    就算疲倦 就算是累 也只能执迷(而)不悔
  </script>
</html>

第四章组件选择、更新

选择

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <h3>第一个</h3>
    <h3>第二个</h3>
    <h3>第三个</h3>
    <h3>第四个</h3>
    <h3>第五个</h3>
  </body>
  <script>
    var h3 = d3.select("h3");
    h3.datum("我把内容改了看看").text(function (d, i) {
      return d;
    });
    console.log(h3);
    //输出结果
    //    我把内容改了看看
    //    第二个
    //    第三个
    //    第四个
    //    第五个
  </script>
</html>

更新

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <h3>第一个</h3>
    <p title="23℃">第二个</p>
  </body>
  <script>
    var h3 = d3.select("h3");
    var p = d3.select("p");
    h3.attr("title", "我是一个h3标签"); //页面中鼠标滑过 显示 '我是一个h3标签'
    console.log(p.attr("title")); //控制台输出 23℃
  </script>
</html>

第五章柱装图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <svg width="100%" height="300"></svg>
  </body>

  <script>
    var data = [730, 530, 330, 230, 130];
    var g = d3
      .select("svg") // 获取svg
      .append("g") // 创建分组
      .attr("transform", "translate(30,30)"); // 图表距离视口的左、上距离

    var rectHeight = 30; //设定矩形的高＋与下一个矩形的边距  共30px

    g.selectAll("rect")
      .data(data)
      .enter()
      .append("rect") //利用enter 创建与数据个数一样的rect矩形
      .attr("x", 0) //这里设定矩形左上顶点的x值
      .attr("y", function (d, i) {
        return rectHeight * i; //这里设定矩形左上顶点的Y值
      })
      .attr("width", function (d, i) {
        return d; //矩形宽度
      })
      .attr("height", rectHeight - 5) //这里矩形实际的高度就是25  与下一个矩形的边距是5
      .style("fill", "pink"); //填充色
  </script>
</html>

第六章坐标轴

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>scaleLinear</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <svg width="100%" height="300"></svg>
  </body>

  <script>
    var data = [7.3, 5.3, 3.3, 2.3, 1.3];

    //定义比例尺
    var scaleLinear = d3
      .scaleLinear()
      .domain([0, d3.max(data)])
      .range([0, 800]);

    var g = d3.select("svg").append("g").attr("transform", "translate(30,30)");

    var rectHeight = 30;

    g.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("x", 0)
      .attr("y", function (d, i) {
        return rectHeight * i;
      })
      .attr("width", function (d, i) {
        return scaleLinear(d); //在这里的得到 映射的宽度
      })
      .attr("height", rectHeight - 5)
      .attr("fill", "pink");

    //定义一个x坐标轴   坐标轴的比例尺 我们跟图表的用一个
    var axisX = d3.axisBottom(scaleLinear).ticks(20); //ticks 用来设置刻度间隔    其实就是把data数据 根据咱们的参数20  重新调整一下

    g.append("g") //在原有分g矩形分组里 再加一个x轴分组
      .attr("transform", "translate(0," + data.length * rectHeight + ")")
      .call(axisX);
  </script>
</html>

第七章柱装图进阶

静态柱装图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <svg width="500" height="400"></svg>
  </body>

  <script>
    var data = [90, 75, 12, 36, 54, 88, 24, 66];
    var margin = 30; //上下左右边距

    var svg = d3.select("svg");
    var width = svg.attr("width");
    var height = svg.attr("height");
    //创建一个矩形分组
    var g = svg
      .append("g")
      .attr("transform", "translate(" + margin + "," + margin + ")");

    //定义x轴比例尺
    var scaleX = d3
      .scaleBand()
      .domain(d3.range(data.length)) //[0, 1, 2, 3, 4, 5, 6, 7]
      .rangeRound([0, width - margin * 2]); //左右边距30

    //定义Y轴比例尺
    var scaleY = d3
      .scaleLinear()
      .domain([0, d3.max(data)])
      .range([height - margin * 2, 0]); //上边距30   这里还得注意  range后面跟的参数  0放在第二位   因为y轴正方向是反的

    //绘制x y 轴
    var axisX = d3.axisBottom(scaleX);
    var axisY = d3.axisLeft(scaleY);
    g.append("g")
      .attr("transform", "translate(0," + (height - margin * 2) + ")")
      .call(axisX);
    g.append("g").attr("transform", "translate(0,0)").call(axisY);

    var rectP = 30; //柱状图间距
    var gs = g.selectAll("rect").data(data).enter().append("g"); //分组

    //绘制矩形
    gs.append("rect")
      .attr("x", function (d, i) {
        return scaleX(i) + rectP / 2;
      })
      .attr("y", function (d, i) {
        return scaleY(d);
      })
      .attr("width", function () {
        return scaleX.step() - rectP;
      })
      .attr("height", function (d, i) {
        return height - margin * 2 - scaleY(d);
      })
      .attr("fill", "pink");

    //绘制文字
    gs.append("text")
      .attr("x", function (d, i) {
        return scaleX(i) + rectP / 2;
      })
      .attr("y", function (d, i) {
        return scaleY(d);
      })
      .text(function (d, i) {
        return d;
      });
  </script>
</html>

动态柱装图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <svg width="500" height="400"></svg>
  </body>

  <script>
    var data = [90, 75, 12, 36, 54, 88, 24, 66];
    var margin = 30; //svg 上下左右边距

    var svg = d3.select("svg");
    var width = svg.attr("width");
    var height = svg.attr("height");

    //创建分组
    var g = svg
      .append("g")
      .attr("transform", "translate(" + margin + "," + margin + ")");

    //定义 x y 轴比例尺
    var scaleX = d3
      .scaleBand()
      .domain(d3.range(data.length))
      .range([0, width - margin * 2]);
    var scaleY = d3
      .scaleLinear()
      .domain([0, d3.max(data)])
      .range([height - margin * 2, 0]);

    //绘画 x y  轴
    var axisX = d3.axisBottom(scaleX);
    var axisY = d3.axisLeft(scaleY);

    g.append("g")
      .attr("transform", "translate(0," + (height - margin * 2) + ")")
      .call(axisX);
    g.append("g").attr("transform", "translate(0,0)").call(axisY);

    // 创建矩形分组
    var gs = g.selectAll("rect").data(data).enter().append("g");

    //绘 柱状图  +  过度效果
    var rectP = 40; //柱状图间距
    gs.append("rect")
      .attr("x", function (d, i) {
        return scaleX(i) + rectP / 2;
      })
      .attr("y", function (d, i) {
        //            return scaleY(d);
        //            return 0;//动画的初始状态为0  如果是这样的话  就像下雨的效果  柱状图从上往下生长
        //
        var min = scaleY.domain()[0]; //[0,90]
        console.log(min); //  输出 0
        return scaleY(min); // scaleY(0) y轴比例尺 映射出来的是最大值；   这个效果 等同于return height - 2*margin;的效果
      })
      .attr("width", function (d, i) {
        return scaleX.step() - rectP;
      })
      .attr("height", function (d, i) {
        //            return height - margin*2 - scaleY(d);
        return 0; //动画的初始状态为0
      })
      .attr("fill", "pink")
      .transition() //添加过度
      .duration(2000) //动画的持续时间  毫秒
      .delay(function (d, i) {
        //延迟执行
        return i * 300; //每个柱子逐渐开始的效果
      })
      .attr("y", function (d, i) {
        return scaleY(d);
      })
      .attr("height", function (d, i) {
        return height - margin * 2 - scaleY(d);
      });

    //绘 文字  +  过度效果

    gs.append("text")
      .attr("x", function (d, i) {
        return scaleX(i) + rectP / 2;
      })
      .attr("y", function (d, i) {
        //            return scaleY(d);
        return height - 2 * margin; //这里的初始化效果 同上面的矩形初始化效果一样
      })
      .attr("dx", function (d, i) {
        return -2;
      })
      .attr("dy", function (d, i) {
        return 20;
      })
      .text(function (d, i) {
        return d;
      })
      .transition()
      .duration(2000)
      .delay(function (d, i) {
        return i * 300; //300毫秒
      })
      .attr("y", function (d, i) {
        return scaleY(d);
      });
  </script>
</html>

交互柱装图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <svg width="500" height="400"></svg>
  </body>

  <script>
    var data = [90, 75, 12, 36, 54, 88, 24, 66];
    var margin = 30; //svg 上下左右边距

    var svg = d3.select("svg");
    var width = svg.attr("width");
    var height = svg.attr("height");

    //创建分组
    var g = svg
      .append("g")
      .attr("transform", "translate(" + margin + "," + margin + ")");

    //定义 x y 轴比例尺
    var scaleX = d3
      .scaleBand()
      .domain(d3.range(data.length))
      .range([0, width - margin * 2]);
    var scaleY = d3
      .scaleLinear()
      .domain([0, d3.max(data)])
      .range([height - margin * 2, 0]);

    //绘画 x y  轴
    var axisX = d3.axisBottom(scaleX);
    var axisY = d3.axisLeft(scaleY);

    g.append("g")
      .attr("transform", "translate(0," + (height - margin * 2) + ")")
      .call(axisX);
    g.append("g").attr("transform", "translate(0,0)").call(axisY);

    // 创建矩形分组
    var gs = g.selectAll("rect").data(data).enter().append("g");

    //绘 柱状图  +  过度效果
    var rectP = 10; //柱状图间距
    gs.append("rect")
      .attr("x", function (d, i) {
        return scaleX(i) + rectP / 2;
      })
      .attr("y", function (d, i) {
        return scaleY(d);
      })
      .attr("width", function (d, i) {
        return scaleX.step() - rectP;
      })
      .attr("height", function (d, i) {
        return height - margin * 2 - scaleY(d);
      })
      .attr("fill", "pink")

      //添加鼠标划入划出事件
      .on("mouseover", function () {
        //鼠标划入矩形事件
        d3.select(this) //这里的this指向就是当前的矩形

          .transition()
          .duration(1000)
          .delay(200)
          .attr("fill", "#306ade");
      })
      .on("mouseout", function () {
        d3.select(this)

          .transition()
          .duration(1000)
          .delay(200)
          .attr("fill", "pink");
      });

    //绘 文字  +  过度效果

    gs.append("text")
      .attr("x", function (d, i) {
        return scaleX(i) + rectP / 2 + 15;
      })
      .attr("y", function (d, i) {
        //            return scaleY(d);
        return height - 2 * margin; //这里的初始化效果 同上面的矩形初始化效果一样
      })
      .attr("dx", function (d, i) {
        return -2;
      })
      .attr("dy", function (d, i) {
        return 20;
      })
      .text(function (d, i) {
        return d;
      })
      .transition()
      .duration(2000)
      .delay(function (d, i) {
        return i * 300; //300毫秒
      })
      .attr("y", function (d, i) {
        return scaleY(d);
      });
  </script>
</html>

第八章饼图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>pie</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <svg width="500" height="400"></svg>
  </body>

  <script>
    //准备数据
    var margin = 30; //边距
    var data = [56, 21, 11, 85, 42, 66]; //绘制饼图所需数据
    var svg = d3.select("svg");
    var width = svg.attr("width");
    var height = svg.attr("height");

    //创建一个分组 并设置偏移
    var g = svg
      .append("g")
      .attr("transform", "translate(" + margin + "," + margin + ")");

    //为了让饼图不同区域显示不同颜色   我们先创建一个颜色比例尺   用之前我们讲到的序数比例尺
    var scaleColor = d3
      .scaleOrdinal()
      .domain(d3.range(data.length))
      .range(d3.schemeCategory10);

    //创建一个饼图
    var pie = d3.pie();

    //创建一个弧形生成器
    var arc = d3
      .arc()
      .innerRadius(0) //设置环的内半径.
      .outerRadius(100); //设置环的外半径.
    //除了内半径与外半径  还可以设置很多  如下
    //        arc.cornerRadius - 设置拐角半径.
    //        arc.startAngle - 设置起始角度.
    //        arc.endAngle - 设置终止角度.
    //        arc.padAngle - 设置相邻两个环之间的间隙角度.
    //        arc.padRadius - 设置半径间隔.
    //        arc.context - 设置渲染上下文.

    //利用pie 转换数据
    var pieData = pie(data);
    console.log(pieData); //看看转换成了啥

    //创建扇形分组
    var gs = g
      .selectAll(".g")
      .data(pieData)
      .enter()
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    //绘制扇形
    gs.append("path")
      .attr("d", function (d, i) {
        return arc(d); //给弧形生成器添加数据
      })
      .attr("fill", function (d, i) {
        return scaleColor(i); //给扇形填充颜色
      });

    //绘制文字
    gs.append("text")
      .attr("transform", function (d, i) {
        return "translate(" + arc.centroid(d) + ")"; //位置设置在扇形中心处
      })
      .attr("text-anchor", "middle")
      .text(function (d, i) {
        return d.data;
      });
  </script>
</html>

第九章力导图（知识图谱）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>force</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <svg height="600" width="1080"></svg>
  </body>

  <script>
    //数据
    var nodes = [
      //节点集
      { name: "湖南邵阳" },
      { name: "山东莱州" },
      { name: "广东阳江" },
      { name: "山东枣庄" },
      { name: "赵丽泽" },
      { name: "王恒" },
      { name: "张欣鑫" },
      { name: "赵明山" },
      { name: "班长" },
    ];
    var edges = [
      //边集
      { source: 0, target: 4, relation: "籍贯", value: 1.3 },
      { source: 4, target: 5, relation: "舍友", value: 1 },
      { source: 4, target: 6, relation: "舍友", value: 1 },
      { source: 4, target: 7, relation: "舍友", value: 1 },
      { source: 1, target: 6, relation: "籍贯", value: 2 },
      { source: 2, target: 5, relation: "籍贯", value: 0.9 },
      { source: 3, target: 7, relation: "籍贯", value: 1 },
      { source: 5, target: 6, relation: "同学", value: 1.6 },
      { source: 6, target: 7, relation: "朋友", value: 0.7 },
      { source: 6, target: 8, relation: "职责", value: 2 },
    ];

    var margin = 30; //边距
    var svg = d3.select("svg");
    var width = svg.attr("width");
    var height = svg.attr("height");

    //创建一个分组 并设置偏移
    var g = svg
      .append("g")
      .attr("transform", "translate(" + margin + "," + margin + ")");

    //新建一个颜色比例尺
    var scaleColor = d3
      .scaleOrdinal()
      .domain(d3.range(nodes.length))
      .range(d3.schemeCategory10);

    //新建一个力导向图
    var forceSimulation = d3
      .forceSimulation()
      .force("link", d3.forceLink())
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter());

    //生成节点数据
    forceSimulation.nodes(nodes).on("tick", linksTick); //这个函数下面会讲解

    //生成边数据
    forceSimulation
      .force("link")
      .links(edges)
      .distance(function (d, i) {
        return d.value * 100; //设置边长
      });

    //设置图形 中心点
    forceSimulation
      .force("center")
      .x(width / 2) //设置x坐标
      .y(height / 2); //设置y坐标

    //再来看下顶点数据 和 边数据
    console.log(nodes);
    console.log(edges);

    //绘制边  这里注意一下绘制顺序  在d3中  各元素是有层级关系的，先绘制的在下面
    var links = g
      .append("g")
      .selectAll("line")
      .data(edges)
      .enter()
      .append("line")
      .attr("stroke", function (d, i) {
        return scaleColor(i); //设置边线颜色
      })
      .attr("storke-width", "1"); //设置边线宽度

    //绘制边上的文字
    var linksText = g
      .append("g")
      .selectAll("text")
      .data(edges)
      .enter()
      .append("text")
      .text(function (d, i) {
        return d.relation;
      });

    //创建节点分组
    var gs = g
      .selectAll(".circle")
      .data(nodes)
      .enter()
      .append("g")
      .attr("transform", function (d, i) {
        return "translate(" + d.x + "," + d.y + ")";
      })
      .call(
        d3
          .drag() //相当于移动端的拖拽手势  分以下三个阶段
          .on("start", start)
          .on("drag", drag)
          .on("end", end)
      );

    //绘制节点
    gs.append("circle")
      .attr("r", 10)
      .attr("fill", function (d, i) {
        return scaleColor(i);
      });

    //绘制文字
    gs.append("text").text(function (d, i) {
      return d.name;
    });

    function linksTick() {
      links
        .attr("x1", function (d) {
          return d.source.x;
        })
        .attr("y1", function (d) {
          return d.source.y;
        })
        .attr("x2", function (d) {
          return d.target.x;
        })
        .attr("y2", function (d) {
          return d.target.y;
        });

      linksText
        .attr("x", function (d) {
          return (d.source.x + d.target.x) / 2;
        })
        .attr("y", function (d) {
          return (d.source.y + d.target.y) / 2;
        });

      gs &&
        gs.attr("transform", function (d, i) {
          return "translate(" + d.x + "," + d.y + ")";
        });
    }

    function start(d) {
      if (!d3.event.active) {
        //event.active 属性对判断并发的拖拽手势序列中的 start 事件和 end 事件: 在拖拽手势开始时为0，在拖拽结束最后一个手势事件时为0
        //这里就是drag的过程中
        forceSimulation.alphaTarget(0.8).restart(); //设置衰减系数，对节点位置移动过程的模拟，数值越高移动越快，数值范围[0，1]
      }
      d.fx = d.x;
      d.fy = d.y;
    }

    function drag(d) {
      d.fx = d3.event.x;
      d.fy = d3.event.y;
    }

    function end(d) {
      if (!d3.event.active) {
        forceSimulation.alphaTarget(0);
      }
      d.fx = null;
      d.fy = null;
    }
  </script>
</html>

第十章中国地图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>中国地图</title>
    <script src="./d3.min.js"></script>
  </head>
  <body>
    <svg width="900" height="700"></svg>
  </body>

  <script>
    //获取svg
    var svg = d3.select("svg");
    var width = svg.attr("width");
    var height = svg.attr("height");

    //创建区域分组
    var g = svg.append("g").attr("transform", "translate(0,0)");

    //创建一个地图投影
    var mercator = d3
      .geoMercator()
      .center([107, 31]) //设置投影的中心点 经纬度
      .scale(550) //设置缩放因子
      .translate([width / 2, height / 2]); //设置平移偏移量

    //创建一个地理路径生成器
    var geoPath = d3.geoPath().projection(mercator); //设置地理路径生成器的投影方式

    //获取中国地图的json文件
    //利用node.js 在本地起一个http-server
    d3.json("map.json").then(function (data) {
      //D3 v5版本d3.json()现在将返回一个你可以在.then()方法中处理的Promise
      console.log(data); //features

      //新建一个颜色比例尺
      var scaleColor = d3
        .scaleOrdinal()
        .domain(d3.range(data.features.length))
        .range(d3.schemeCategory10);

      //绘制区域
      g.append("g")
        .selectAll("path")
        .data(data.features)
        .enter()
        .append("path")
        .attr("stroke", "gray")
        .attr("strok-widht", 1)
        .attr("d", function (d, i) {
          return geoPath(d);
        })
        .attr("fill", function (d, i) {
          return scaleColor(i);
        })
        .on("mouseover", function (d, i) {
          d3.select(this).attr("fill", "yellow");
        })
        .on("mouseout", function (d, i) {
          d3.select(this).attr("fill", scaleColor(i));
        });

      //绘制文字
      g.append("g")
        .selectAll("text")
        .data(data.features)
        .enter()
        .append("text")
        .attr("font-size", 12)
        .attr("text-anchor", "middle")
        .attr("x", function (d, i) {
          var position = mercator(d.properties.centroid || [0, 0]);
          return position[0];
        })
        .attr("y", function (d, i) {
          var position = mercator(d.properties.centroid || [0, 0]);
          return position[1];
        })
        .attr("dy", function (d, i) {
          //这里为什么这么写呢，因为澳门和香港重合了，挤到一起了。
          if (d.properties.name === "澳门特别行政区") {
            return 10;
          }
        })
        .text(function (d, i) {
          return d.properties.name;
        });
    });
  </script>
</html>

大前端-postcss安装使用指南黑夜照亮前行的路 postcss
PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Python python chrome drivers
ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
虚拟 DOM 的优缺点有哪些咕噜签名分发前端 javascript 开发语言
虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优
3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb 前端 ajax elementui java 前端框架
P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
Python dict字符串转json对象，小数精度丢失问题朝如青丝暮成雪 json python
一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print
java实体中返回前端的double类型四舍五入（格式化）婲落ヽ紅顏誶 java
根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
Django forms组件在飞行-米龙 Django django python 后端
【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
Web前端Html的表单任家伟前端 html
表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）王佳斌 +Thinkphp mysql 前端数据库
前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
javascript 日期转换为时间戳，时间戳转换为日期的函数 cdcdhj javascript学习日记 javascript 开发语言 ecmascript
日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-
COMP315 JavaScript Cloud Computing for E Commerce zhuyu0206girl javascript 开发语言 ecmascript
Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform
JSON与AJAX：网页交互的利器入冉心 json ajax 前端
在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据
程序员开发技术整理 laizhixue 学习前端框架
前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
【前端学习——js篇】7.函数缓存笔下无竹墨下有鱼前端学习前端学习 javascript
具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
javascript的数据类型及转换田小田txt
一、JavaScript数据类型：共有string，number，boolean，object，function五种数据类型；其中Object，Date，Array为对象型；2个不包含任何值的数据类型：null，undefined。二、Typeof查看数据类型：typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa
Websocket服务监听收发消息 beiback Java 服务器问题 websocket 网络协议网络
目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致
Netty服务器结合WebSocke协议监听和接收数据 beiback 服务器问题 Java 服务器运维 netty
目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
基于SSM+Vue企业销售培训系统企业人才培训系统企业课程培训管理系统企业文化培训班系统Java 计算机程序老哥
作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
javascript实现SM2加密解密人生在勤，不索何获 javascript 前端 jquery
前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
Vue：为什么要使用v-cloak 刻刻帝的海角 vue.js 前端 javascript
Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu
Github 2024-03-26 开源项目日报 Top10 老孙正经胡说 github 开源 Github趋势分析开源项目 Python Golang
根据GithubTrendings的统计，今日(2024-03-26统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Python项目3TypeScript项目3JupyterNotebook项目2C++项目1GDScript项目1Lua项目1Solidity项目1OpenInterpreter:本地代码运行和自然语言界面创建周期：254天开发语言：Python协议
JavaScript快速入门笔记之二（变量、常量、数据类型） eshineLau 前端开发 javascript 笔记前端
JavaScript快速入门笔记之二（变量、常量、数据类型）1、变量何时使用变量：程序中的一切数据都要保存在变量中，反复使用如何使用变量：2种情况：赋值和取值赋值：2步：1.1创建变量：——声明——创建一个新的空变量语法：var变量名;强调：仅声明，未赋值的变量，默认值是undefined命名：1.不能以数字开头2.不能用保留字。3.一般采用驼峰命名1.2赋值：将数据保存到变量中语法：变量名=数据
前端埋点解决方案 zhu_zhu_xia 前端
一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func
vue时间组件：dayjs与moment 煸橙干儿~~ VUE实战 vue.js 前端 javascript
一、dayjs使用Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。具体使用可参考：dayjs官网1、本年start=dayjs().startOf('year').format('YYYY-MM-DD')end=dayjs().endOf('year').format('YYYY-MM-DD')console.log(start,end)//['2
如何提出令人爱回答的好问题？兮若耶
我们经常会遇到这样的问题，如我适合做什么？这个名词怎么解释？大部分人面对这样的问题时，要么答非所问，要么无从下手。现在的很多事物都是速成的，只是好的问题并没有那么容易被提出来。而提不好的问题，可能会拿不到想要的信息等等。所以提出一个好问题很重要。01提问的功能我们参加各种聚会、会议时，能听到很多的比喻和新观点，而这些是在书上和网上找不到的。这些新的有用的东西，都在前端被实践着，暂时来不及把知识系统
谈谈对前端性能监控的理解和实践 Layla_c web jave python 前端
一、谈谈对前端性能监控的理解和实践前端性能监控是确保网页或应用高效、稳定运行的关键环节，它涉及对前端页面加载速度、资源消耗、错误率等指标的实时监控和预警。通过前端性能监控，开发者和运维团队能够及时发现并解决性能瓶颈，从而提升用户体验和系统稳定性。理解前端性能监控，首先要明确其重要性。在移动互联网时代，用户对网页和应用的响应速度有着极高的要求。如果页面加载缓慢或出现卡顿，用户可能会选择离开，这对企业
mineadmin使用docker启动方式 qq_38812523 docker php 容器
找个目录,git下来mineadmin代码,在根目录,创建文件名docker-compose.yml然后复制下面代码version:'3'services:#首先下载前端，https://gitee.com/mineadmin/mineadmin-vue#在后端根目录建立mine-ui目录，把前端文件复制过来。#容器内访问宿主机的地址用：host.docker.internal#宿主机也可以在ho
为什么需要使用版本控制工具（如Git）？它如何帮助管理前端开发项目？智伴科技 git
版本控制工具（如Git）在前端开发项目中扮演着重要的角色，主要有以下几方面的作用：1.**版本管理**：版本控制工具可以帮助开发团队管理项目的不同版本，记录每次代码变动的历史记录，方便追踪和回溯。开发人员可以通过版本控制工具轻松地查看、对比和恢复以前的版本。2.**协同合作**：多人开发同一个项目时，版本控制工具可以协助团队成员协同工作，避免代码冲突、重复工作和混乱。开发人员可以通过版本控制工具共
低代码与前端开发架构：重塑软件开发的未来快乐非自愿低代码架构前端
随着技术的不断进步和数字化转型的深入，软件开发领域正经历着一场革命性的变革。在这场变革中，低代码开发平台和前端开发架构扮演着越来越重要的角色。本文将探讨低代码与前端开发架构之间的关系，并分析它们如何共同推动软件开发的创新与发展。低代码开发平台的崛起低代码开发平台（Low-CodeDevelopmentPlatform,LCDP）是一种新型的软件开发方式，它允许开发者通过图形化界面、预构建的模块和模
Github 2024-03-25 开源项目日报Top10 老孙正经胡说 github 开源 Github趋势分析开源项目 Python Golang
根据GithubTrendings的统计，今日(2024-03-25统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Python项目4JupyterNotebook项目2TypeScript项目2GDScript项目1Lua项目1Go项目1Dart项目1OpenInterpreter:本地代码运行和自然语言界面创建周期：254天开发语言：Python协议类型：GN
scala的option和some 矮蛋蛋编程 scala
原文地址： http://blog.sina.com.cn/s/blog_68af3f090100qkt8.html 对于学习 Scala 的 Java™ 开发人员来说，对象是一个比较自然、简单的入口点。在本系列前几期文章中，我介绍了 Scala 中一些面向对象的编程方法，这些方法实际上与 Java 编程的区别不是很大。我还向您展示了 Scala 如何重新应用传统的面向对象概念，找到其缺点
NullPointerException Cb123456 android BaseAdapter
java.lang.NullPointerException: Attempt to invoke virtual method 'int android.view.View.getImportantForAccessibility()' on a null object reference 出现以上异常.然后就在baidu上
PHP使用文件和目录天子之骄 php文件和目录读取和写入 php验证文件 php锁定文件
PHP使用文件和目录 1.使用include()包含文件 (1)：使用include()从一个被包含文档返回一个值 (2)：在控制结构中使用include() include_once()函数需要一个包含文件的路径，此外，第一次调用它的情况和include()一样，如果在脚本执行中再次对同一个文件调用，那么这个文件不会再次包含。在php.ini文件中设置
SQL SELECT DISTINCT 语句何必如此 sql
SELECT DISTINCT 语句用于返回唯一不同的值。 SQL SELECT DISTINCT 语句在表中，一个列可能会包含多个重复值，有时您也许希望仅仅列出不同（distinct）的值。 DISTINCT 关键词用于返回唯一不同的值。 SQL SELECT DISTINCT 语法 SELECT DISTINCT column_name,column_name F
java冒泡排序 3213213333332132 java 冒泡排序
package com.algorithm; /** * @Description 冒泡 * @author FuJianyong * 2015-1-22上午09:58:39 */ public class MaoPao { public static void main(String[] args) { int[] mao = {17,50,26,18,9,10
struts2.18 +json,struts2-json-plugin-2.1.8.1.jar配置及问题！ 7454103 DAO spring Ajax json qq
struts2.18 出来有段时间了！（貌似是稳定版）闲时研究下下！貌似 sruts2 搭配 json 做 ajax 很吃香！实践了下下！不当之处请绕过！呵呵网上一大堆 struts2+json 不过大多的json 插件都是 jsonplugin.34.jar strut
struts2 数据标签说明 darkranger jsp bean struts servlet Scheme
数据标签主要用于提供各种数据访问相关的功能，包括显示一个Action里的属性，以及生成国际化输出等功能数据标签主要包括： action ：该标签用于在JSP页面中直接调用一个Action，通过指定executeResult参数，还可将该Action的处理结果包含到本页面来。 bean ：该标签用于创建一个javabean实例。如果指定了id属性，则可以将创建的javabean实例放入Sta
链表.简单的链表节点构建 aijuans 编程技巧
/*编程环境WIN-TC*/ #include "stdio.h" #include "conio.h" #define NODE(name, key_word, help) \ Node name[1]={{NULL, NULL, NULL, key_word, help}} typedef struct node { &nbs
tomcat下jndi的三种配置方式 avords tomcat
jndi(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。命名服务将名称和对象联系起来，使得我们可以用名称访问对象。目录服务是一种命名服务，在这种服务里，对象不但有名称，还有属性。 tomcat配置
关于敏捷的一些想法 houxinyou 敏捷
从网上看到这样一句话：“敏捷开发的最重要目标就是：满足用户多变的需求，说白了就是最大程度的让客户满意。” 感觉表达的不太清楚。感觉容易被人误解的地方主要在“用户多变的需求”上。第一种多变，实际上就是没有从根本上了解了用户的需求。用户的需求实际是稳定的，只是比较多，也比较混乱，用户一般只能了解自己的那一小部分，所以没有用户能清楚的表达出整体需求。而由于各种条件的，用户表达自己那一部分时也有
富养还是穷养，决定孩子的一生 bijian1013 教育人生
是什么决定孩子未来物质能否丰盛？为什么说寒门很难出贵子，三代才能出贵族？真的是父母必须有钱，才能大概率保证孩子未来富有吗？-----作者：@李雪爱与自由事实并非由物质决定，而是由心灵决定。一朋友富有而且修养气质很好，兄弟姐妹也都如此。她的童年时代，物质上大家都很贫乏，但妈妈总是保持生活中的美感，时不时给孩子们带回一些美好小玩意，从来不对孩子传递生活艰辛、金钱来之不易、要懂得珍惜
oracle 日期时间格式转化征客丶 oracle
oracle 系统时间有 SYSDATE 与 SYSTIMESTAMP； SYSDATE：不支持毫秒，取的是系统时间； SYSTIMESTAMP：支持毫秒，日期，时间是给时区转换的，秒和毫秒是取的系统的。日期转字符窜：一、不取毫秒： TO_CHAR(SYSDATE, 'YYYY-MM-DD HH24:MI:SS') 简要说明， YYYY 年 MM 月
【Scala六】分析Spark源代码总结的Scala语法四 bit1129 scala
1. apply语法 FileShuffleBlockManager中定义的类ShuffleFileGroup，定义： private class ShuffleFileGroup(val shuffleId: Int, val fileId: Int, val files: Array[File]) { ... def apply(bucketId
Erlang中有意思的bug bookjovi erlang
代码中常有一些很搞笑的bug，如下面的一行代码被调用两次（Erlang beam） commit f667e4a47b07b07ed035073b94d699ff5fe0ba9b Author: Jovi Zhang <[email protected]> Date: Fri Dec 2 16:19:22 2011 +0100 erts:
移位打印10进制数转16进制-2008-08-18 ljy325 java 基础
/** * Description 移位打印10进制的16进制形式 * Creation Date 15-08-2008 9:00 * @author 卢俊宇 * @version 1.0 * */ public class PrintHex { // 备选字符 static final char di
读《研磨设计模式》-代码笔记-组合模式 bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
利用cmd命令将.class文件打包成jar chenyu19891124 cmd jar
cmd命令打jar是如下实现：在运行里输入cmd，利用cmd命令进入到本地的工作盘符。(如我的是D盘下的文件有此路径 D:\workspace\prpall\WEB-INF\classes) 现在是想把D:\workspace\prpall\WEB-INF\classes路径下所有的文件打包成prpall.jar。然后继续如下操作： cd D: 回车 cd workspace/prpal
[原创]JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明 comsci eclipse 设计模式算法工作 swing
JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明 &nb
SecureCRT右键粘贴的设置 daizj secureCRT 右键粘贴
一般都习惯鼠标右键自动粘贴的功能，对于SecureCRT6.7.5 ，这个功能也已经是默认配置了。老版本的SecureCRT其实也有这个功能，只是不是默认设置，很多人不知道罢了。菜单： Options->Global Options ...->Terminal 右边有个Mouse的选项块。 Copy on Select Paste on Right/Middle
Linux 软链接和硬链接 dongwei_6688 linux
1.Linux链接概念Linux链接分两种，一种被称为硬链接（Hard Link），另一种被称为符号链接（Symbolic Link）。默认情况下，ln命令产生硬链接。【硬连接】硬连接指通过索引节点来进行连接。在Linux的文件系统中，保存在磁盘分区中的文件不管是什么类型都给它分配一个编号，称为索引节点号(Inode Index)。在Linux中，多个文件名指向同一索引节点是存在的。一般这种连
DIV底部自适应 dcj3sjt126com JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
Centos6.5使用yum安装mysql——快速上手必备 dcj3sjt126com mysql
第1步、yum安装mysql [root@stonex ~]# yum -y install mysql-server 安装结果： Installed: mysql-server.x86_64 0:5.1.73-3.el6_5 &nb
如何调试JDK源码 frank1234 jdk
相信各位小伙伴们跟我一样，想通过JDK源码来学习Java，比如collections包，java.util.concurrent包。可惜的是sun提供的jdk并不能查看运行中的局部变量，需要重新编译一下rt.jar。下面是编译jdk的具体步骤： 1.把C:\java\jdk1.6.0_26\sr
Maximal Rectangle hcx2013 max
Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and return its area. public class Solution { public int maximalRectangle(char[][] matrix)
Spring MVC测试框架详解——服务端测试 jinnianshilongnian spring mvc test
随着RESTful Web Service的流行，测试对外的Service是否满足期望也变的必要的。从Spring 3.2开始Spring了Spring Web测试框架，如果版本低于3.2，请使用spring-test-mvc项目（合并到spring3.2中了）。 Spring MVC测试框架提供了对服务器端和客户端（基于RestTemplate的客户端）提供了支持。 &nbs
Linux64位操作系统（CentOS6.6）上如何编译hadoop2.4.0 liyong0802 hadoop
一、准备编译软件 1.在官网下载jdk1.7、maven3.2.1、ant1.9.4，解压设置好环境变量就可以用。环境变量设置如下：（1）执行vim /etc/profile （2）在文件尾部加入: export JAVA_HOME=/home/spark/jdk1.7 export MAVEN_HOME=/ho
StatusBar 字体白色 pangyulei status
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent]; /*you'll also need to set UIViewControllerBasedStatusBarAppearance to NO in the plist file if you use this method
如何分析Java虚拟机死锁 sesame java thread oracle 虚拟机 jdbc
英文资料： Thread Dump and Concurrency Locks Thread dumps are very useful for diagnosing synchronization related problems such as deadlocks on object monitors. Ctrl-\ on Solaris/Linux or Ctrl-B
位运算简介及实用技巧（一）：基础篇 tw_wangzhengquan 位运算
http://www.matrix67.com/blog/archives/263 去年年底写的关于位运算的日志是这个Blog里少数大受欢迎的文章之一，很多人都希望我能不断完善那篇文章。后来我看到了不少其它的资料，学习到了更多关于位运算的知识，有了重新整理位运算技巧的想法。从今天起我就开始写这一系列位运算讲解文章，与其说是原来那篇文章的follow-up，不如说是一个r
jsearch的索引文件结构 yangshangchuan 搜索引擎 jsearch 全文检索信息检索 word分词
jsearch是一个高性能的全文检索工具包，基于倒排索引，基于java8，类似于lucene，但更轻量级。 jsearch的索引文件结构定义如下： 1、一个词的索引由=分割的三部分组成：第一部分是词第二部分是这个词在多少

D3.js 可视化从入门到精通

第一章 Hello world

第二章 数据绑定

第三章 数据更新

第四章 组件选择、更新

选择

更新

第五章 柱装图

第六章 坐标轴

第七章 柱装图进阶

静态柱装图

动态柱装图

交互柱装图

第八章 饼图

第九章 力导图（知识图谱）

第十章 中国地图

你可能感兴趣的:(前端,javascript,前端,开发语言)

第二章数据绑定

第三章数据更新

第四章组件选择、更新

第五章柱装图

第六章坐标轴

第七章柱装图进阶

第八章饼图

第九章力导图（知识图谱）

第十章中国地图