小编Emi*_*Chu的帖子

基于多列的总和顺序复制行

假设我有以下数据帧(虽然我实际使用的是超过100行):

>> df 
a        b   c   d   e
title0   1   0   0   string   
title1   0   1   1   string   
Run Code Online (Sandbox Code Playgroud)

对于每一行,我想:

  • 在col = ['b','c','d']中,查找有多个列且值为1的行.这是我的条件.
  • 应该复制满足上述条件的重复行,以便第一个副本仅为原始中第一个列= 1的第1个副本,依此类推n次,其中有一个值为1的列.
  • 删除原始行

输出应该是:

>> df
a        b   c   d   e
title0   1   0   0   string   
title1   0   1   0   string   
title1   0   0   1   string   
Run Code Online (Sandbox Code Playgroud)

python duplicates pandas

5
推荐指数
1
解决办法
82
查看次数

使用 d3 在点击时将 svg:image 转换为灰度

有问题的网站

我正在尝试使用以下功能将使用 d3.select 附加的所有 svg:images 转换为灰度:

js:

 <script>

  function convert() {
    d3.selectAll("image")
      .style('filter', 'grayscale(100%)');
  }

</script>
Run Code Online (Sandbox Code Playgroud)

html:

<label id="label" style="display:inline;cursor:pointer;" onclick="convert();">
See in Grayscale</label>
Run Code Online (Sandbox Code Playgroud)

有问题的目标项目是通过以下方式创建的:

  var images = nodeEnter.append("svg:image")
    .attr("xlink:href",  function(d) { return d.path;})
    .attr("x", function(d) { return -25;})
    .attr("y", function(d) { return -25;})
    .attr("height", 50)
    .attr("width", 50);
Run Code Online (Sandbox Code Playgroud)

我看到检查器中的功能将样式属性过滤器添加到灰度 100%,但元素没有变成灰度。

有任何想法吗?

javascript css svg image d3.js

2
推荐指数
1
解决办法
998
查看次数

在 shadow root 中修改自定义元素的样式

我正在尝试使用 shadow DOM 修改两个自定义 HTML 元素“输出屏幕”和“自定义计算器”的样式。

当我尝试通过附加如下所示的 shadow DOM 来执行此操作时,未应用样式。任何想法我做错了什么?

JS小提琴

<custom-calculator id="calculator">
  <output-screen></output-screen>
</custom-calculator>

<script>
var o = Object.create(HTMLElement.prototype);
    var oElement = document.registerElement('output-screen', {
        prototype: o
    });

var c = Object.create(HTMLElement.prototype);
var cElement = document.registerElement('custom-calculator', {
  prototype: c
});

var calc = document.querySelector('#calculator')
calc.attachShadow({ mode: 'open' });
calc.shadowRoot;
calc.shadowRoot.innerHTML = `
<style>
output-screen{
display:inline-block;
background-color:orange;
width:50%;
height:100vh;
}
custom-calculator {
display:inline-block;
background-color:grey;
width:100%;
height:100vh;
vertical-align:top;
}
</style>
`;
</script>
Run Code Online (Sandbox Code Playgroud)

html javascript css shadow-dom custom-element

1
推荐指数
1
解决办法
3158
查看次数

标签 统计

css ×2

javascript ×2

custom-element ×1

d3.js ×1

duplicates ×1

html ×1

image ×1

pandas ×1

python ×1

shadow-dom ×1

svg ×1