剩下的盛夏~

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>

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）跳房子的前端前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
JavaScript `Map` 和 `WeakMap`详细解释跳房子的前端 JavaScript 原生方法 javascript 前端开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
切换淘宝最新npm镜像源是 hai40587 npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
高性能javascript--算法和流程控制海淀萌狗
-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
JavaScript中秋快乐！ Q_w7742 javascript 开发语言 ecmascript
我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
第三十一节:Vue路由:前端路由vs后端路由的了解曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
华雁智科前端面试题因为奋斗超太帅啦前端笔试面试问题整理 javascript 开发语言 ecmascript
1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
分布式锁和spring事务管理暴躁的鱼锁及事务分布式 spring java
最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
前端CSS面试常见题剑亦未配妥前端面试前端 css 面试
边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
【JS】前端文件读取FileReader操作总结程序员-张师傅前端前端 javascript 开发语言
前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
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,前端,开发语言)

第二章数据绑定

第三章数据更新

第四章组件选择、更新

第五章柱装图

第六章坐标轴

第七章柱装图进阶

第八章饼图

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

第十章中国地图