javascript - 由一组正方形组成的剪辑路径-6ren

javascript - 由一组正方形组成的剪辑路径

转载作者：行者123 更新时间：2023-12-02 14:20:46

我有这个situation ，我可以将更多元素分组到 d3 中的剪辑路径下吗？我想要更多的方 block 使线条变绿。我尝试了各种方法，但没有一个起作用。

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.dot {
  fill: white;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
//def variabili
var width = 960,
height = 500;
//data
var data = [
  [new Date(2001, 0, 1), 1],
  [new Date(2002, 0, 1), 2],
  [new Date(2003, 0, 1), 2],
  [new Date(2004, 0, 1), 3],
  [new Date(2005, 0, 1), 4],
  [new Date(2006, 0, 1), 5]
];
//margin
var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
//assi
var x = d3.time.scale()
    .domain([new Date(2001, 0, 1), new Date(2006, 0, 1)])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, 6])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .interpolate("monotone")
    .x(function(d) { return x(d[0]); })
    .y(function(d) { return y(d[1]); });
//Append svg canvas
var svg = d3.select("body").append("svg")
    .datum(data)
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



var defs = svg.append("defs");

    defs.append("clipPath")
    .attr("id", "area")
    .append("rect")
    .attr("x", 250)
    .attr("y", 220)
    .attr("width", 150)
	.attr("height", 100);

//plot axis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

//plot rect
svg.append("rect")
.attr("x", 250)
.attr("y", 220)
.attr("width", 150)
.attr("height", 100)
.style("fill", "yellow");

//plot line
svg.append("path")
.attr("class", "line")
.attr("width", width)
.attr("height", height)
.style("stroke", "red")
.attr("d", line);

//plot line overlay
svg.append("path")
    .attr("class", "line")
    .attr("clip-path", "url(#area)")
.style("stroke", "green")
.style("stroke-width", "3")
    .attr("d", line);


</script>

最佳答案

听起来你想让你的剪辑路径数据驱动:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font: 10px sans-serif;
  }
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  .line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
  }
  .dot {
    fill: white;
    stroke: steelblue;
    stroke-width: 1.5px;
  }
</style>

<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
    //def variabili
    var width = 960,
      height = 500;
     //data
    var data = [
      [new Date(2001, 0, 1), 1],
      [new Date(2002, 0, 1), 2],
      [new Date(2003, 0, 1), 2],
      [new Date(2004, 0, 1), 3],
      [new Date(2005, 0, 1), 4],
      [new Date(2006, 0, 1), 5]
    ];
     //margin
    var margin = {
        top: 20,
        right: 30,
        bottom: 30,
        left: 40
      },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
     //assi
    var x = d3.time.scale()
      .domain([new Date(2001, 0, 1), new Date(2006, 0, 1)])
      .range([0, width]);

    var y = d3.scale.linear()
      .domain([0, 6])
      .range([height, 0]);

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");

    var line = d3.svg.line()
      .interpolate("monotone")
      .x(function(d) {
        return x(d[0]);
      })
      .y(function(d) {
        return y(d[1]);
      });

     //Append svg canvas
    var svg = d3.select("body").append("svg")
      .datum(data)
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 
    var clips = [
      {
        x: 250,
        y: 250,
        width: 150,
        height: 150
      },{
        x: 100,
        y: 300,
        width: 50,
        height: 50
      },{
        x: 700,
        y: 100,
        width: 50,
        height: 50
      }
      
    ];    
    
    var defs = svg.append("defs");

    defs.selectAll("clipPath")
      .data(clips)
      .enter()
      .append("clipPath")
      .attr("id", function(d,i){
        return "area-" + i;
      })
      .append("rect")
      .attr("x", function(d){
        return d.x;
      })
      .attr("y", function(d){
        return d.y;
      })
      .attr("width", function(d){
        return d.width;
      })
      .attr("height", function(d){
        return d.height;
      });

     //plot axis
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

     //plot line
    svg.append("path")
      .attr("class", "line")
      .style("stroke", "red")
      .attr("d", line);

     //plot line overlay
    svg.selectAll(".clipped")
      .data(d3.range(clips.length))
      .enter()
      .append("path")
      .attr("class", "clipped")
      .attr("clip-path", function(d){
        return "url(#area-" + d + ")";
      })
      .style("stroke", "green")
      .style("stroke-width", "3")
      .style("fill", "none")
      .attr("d", line(data));
    
  </script>

关于javascript - 由一组正方形组成的剪辑路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38662838/

文章推荐： asp.net - 文件下载时出现 System.OutOfMemoryException

文章推荐： android - Flutter Web 在现有 Flutter 应用程序中创建问题

css - 三个水平正方形|正方形| |正方形| |正方形|使用 CSS
我试图使用显示正方形(如元素符号正方形) .squares{ list-style-type: square; display:inline; } 但我希望它们是水
html - 嵌套 DIV - 4 个 div(正方形)，其中 1 个有 4 个 div(正方形)，其中 1 个有 4 个 div(正方形)
这是关于在作为 4 个 div 的一部分的 1 个 div 中嵌套 4 个 div(正方形)... 我在包装器中使用 display: flex 并用于包装的元素本身，否则它不会工作对我来说，这感觉
python - 有什么方法可以从图像中提取变形的矩形/正方形？
这是图像，我想填充此矩形或正方形的边缘，以便可以使用轮廓对其进行裁剪。到目前为止，我所做的是我使用了canny边缘检测器来找到边缘，然后使用bitwise_or或将这个矩形填充了一点，但没有完全填充。
c# - 在图片框内动态创建点/正方形
我希望能够在图片框内创建 X x Y 数量的框/圆圈/按钮。完全像 Windows 碎片整理工具。我尝试创建一个布局并不断向其添加按钮或图片框，但速度非常慢，在添加 200 个左右的图片框后它崩溃，
python - 使用skimage python从图像中选择具有特定度量的区域(正方形)
我正在尝试从图像(肺部图像)中提取 3 个区域，这些区域在软组织中显示，每个区域都是具有特定高度和宽度的正方形，例如宽高各10mm，如下图，如图所示，该区域也是均匀的，这意味着它只包含相同的颜色(在
java - 尝试用鼠标移动四边形/正方形 - LWJGL
在我左键单击它后，我试图让一个正方形跟随我的鼠标。当我右键单击时，方 block 应该停止跟随我的鼠标。我的程序检测到我在方 block 内单击，但由于某种原因，它没有根据 Mouse.getDX/
c - 将二维数组划分为所有可能的 nxn 正方形
已经花了几个小时在这上面了(因为我还在学习)，所以也许你们可以帮忙。问题是我无法弄清楚如何将二维数组划分为所有可能的 nxn 正方形。我正在随机化二维数组，可以说它是这样的: 1 0 1 0 2
facebook - 正方形 Facebook 图片
使用 Graph API，我可以获得小型、大型、中型图片。或者我可以获得小方形图片。但是我怎样才能得到大方形图片呢？有什么服务可以使用吗？最佳答案很简单，我刚发现这个。例子， https://
html - CSS
正方形
我是 HTML 和 CSS 的新手。尝试创建 3 x 3 正方形“图片”，使用，但无法找到将正方形放在页面中间的简单解决方案，例如中间有九个正方形。如何把所有的方 block 都放在大边框的正方
CSS动画圆-三 Angular -正方形
我正在玩弄 CSS 动画以获得乐趣。我有限的经验阻碍了这一进程。下面的脚本将圆形转换为三 Angular 形，再转换为正方形，然后反转。然而，圆形和三 Angular 形之间的动画有一个小错误。我希
html - 如何在网格中正确排列(不同的)正方形？
我的标准布局(最小宽度 1024 像素)有 4 行。第一个和最后一个有 6 个正方形，中间有两个组合正方形。但是第三行的第一个方 block 不见了。我没有使用不同的 CSS 设置。我试过 clear
javascript - 带正方形的特殊布局 div 正方形
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 7 年前。 Improve this q
html - CSS 图像定位(正方形)
我的网站上有 4 张图片，我试图对其进行定位，以便它们在我的 DIV 中形成一个相等的正方形，但它看起来像一条由 4 张图片组成的垂直线。我希望它看起来像 2 个图像的 2 条垂直线，彼此相邻，使其成
OpenCV 正方形 : filtering output
这是方 block 检测示例的输出我的问题是过滤这个方 block 第一个问题是它为同一区域绘制多条线；第二个是我只需要检测对象而不是所有图像。另一个问题是我必须只取除所有图像之外的最大对象。检
python - 矢量化行进立方体(正方形) - 将直线连接成曲线
我正在绘制一个带有移动立方体(正方形，因为它是 2d)算法的元球。一切都很好，但我想将其作为矢量对象获取。到目前为止，我已经从每个事件方 block 中得到一两条矢量线，将它们保存在列表线中。换句话
android - 如何用手指移动 OpenGL 正方形？
实际上，我有一个适用于 Android 1.5 的应用程序，其中包含一个 GLSurfaceView 类，它在屏幕上显示一个简单的方形多边形。我想学习如何添加一个新功能，即移动用手指触摸的方 blo
java - 制作一个 JPanel 正方形
如果我有一个包含多个子组件的 JPanel，我该如何使 JPanel 保持正方形，而不管其父组件的大小如何调整？我尝试了以下代码的变体，但它不会导致子组件也变成正方形。 public void pai
android - 如何保持 TextView 正方形？
我找到了 this answer ，它确保 ImageView 的宽高比得以保留。我如何使用带有可绘制背景的 TextView 来做到这一点？我有这个 TextView: 这是我的背
html - 基于高度的 CSS 正方形
这个问题在这里已经有了答案: Maintain aspect ratio of a div according to height [duplicate] (1 个回答) 关闭 8 年前。是否可以
html - 连接圆 Angular 正方形
如何创建 div Logo ，如下图所示: 这是我在 JsFiddle 中创建的主要问题是如何将两个形状如下图的盒子连接起来，有人可以提出建议吗？ body,html { width: 100%

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 由一组正方形组成的剪辑路径