我有以下 html ：
<div class="main-container">
<h1>A title</h1>
<p>Some text</p>
<div class="sub-container">
<img src="">
</div>
</div>
使用以下 CSS：
.main-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.sub-container{
flex-grow:2;
background-color: green;
}
请注意，我不知道“主容器”上方容器的大小。我使用 flex 是因为我希望“主容器”中的 div 占据底部的所有剩余空间。
我想要的是在“子容器”中有一个图像，它在两个方向（高度和宽度）都适合其父级的大小。现在，如果我将图像添加到“子容器”中，它会溢出并且根本不会缩放。我知道 flex 只适用于直接的孩子（即“子容器”而不是里面的图像）。我也尝试在“子容器”上使用 flex，但我无法取得任何令人满意的结果。
我正在处理需要细垂直线的可视化。理想情况下，我希望它们的宽度为 1px。当我使用线性比例宽度（默认的“range()”）定位它们时，它们显示为不同的宽度，因为它们的计算位置并不总是整数像素。不过，其中一些看起来正好是 1 像素宽（那些更亮）。
rangeRound()然而，当我在线性刻度上使用时，所有线条都具有相同的表观宽度，但它是 2px，即使我明确指定了 1px 笔画宽度。使用舍入Math.round()给出相同的结果。当我尝试使用 0.5 的笔触宽度时，线条也是 2px 宽，只是变暗了。
是否可以绘制“真实”的 1px 宽的线？
编辑：这是一些代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
svg {
border : 1px solid grey;
}
</style>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var W = 1000, H = 400;
var svg = d3.select("body").append("svg").attr("width",W).attr("height",H);
svg.append("line").attr("x1",W/2).attr("y1",0).attr("x2",W/2).attr("y2",H).attr("stroke","black");
svg.append("line").attr("x1",0).attr("y1",H/2).attr("x2",W).attr("y2",H/2).attr("stroke","black");
</script>
</body>
</html>
在我的屏幕 (1920 x 1080) 上，边框看起来像 1px 宽，但 svg 线看起来像 2px。
我正在使用D3.js调用DOM元素的"mousemove"事件上的函数.on(),如下所示:
d3.select("#myelement").on("mousemove", myfunc);
function myfunc(){
// Just to show that I need to get the mouse coordinates here
console.log(d3.mouse(this));
}
我需要我正在调用的函数来了解事件,即鼠标坐标.
由于我的其余代码在计算上非常昂贵,我想节制调用myfunc,比如说每200毫秒.
我怎样才能保留thisin 的值myfunc(这样d3.mouse(this)仍然可以)？我试过这个去抖功能:https://davidwalsh.name/javascript-debounce-function
还有这个:https://remysharp.com/2010/07/21/throttling-function-calls
但是我无法让那些按我想要的方式工作.
我正在建立一个基于设计师工作的网页.有一个单词,其中前6个字母以粗体显示,而其余字母具有正常重量.
.somediv .moreweight {
font-weight: 900;
}<div class="somediv">
<h1>SOME TEXT AND THIS IS THE <span class="moreweight">COMPLI</span>CATED THING</h1>
</div>我的页面上没有任何反应,h1标签中的整个文本具有相同的权重.
这样做的正确方法是什么？
我正在寻找一种方法来设置许多站点范围（或应用程序范围）变量，例如网站（或应用程序）标题，我将在我的模板中使用（例如在我的标题中）。我想到了 WordPress 的bloginfo() 之类的东西。
理想情况下，我希望能够在站点或应用程序级别定义任何类型的属性。例如，对于给定的应用程序，我有：
应用程序
--attribute1（例如标题）
--attribute2（例如联系电子邮件）
--型号1
----属性X
----属性Y
----……
这意味着“attribute1”对我的应用程序来说是独一无二的。然后我需要一种方法来在我的模板中使用 attribute1 的值。我希望我的问题很清楚。
我需要基于另一个数组中可变数量的项目来过滤一个数组。说我要过滤的数组看起来像这样：
var toBeFiltered = [
{name:"A", parentId: 0},
{name: "B", parentId: 3},
{name: "C", parentId: 0},
{name: "D", parentId: 1},
...
]
我需要过滤parentId另一个数组中所有的元素（例如：var filtering = [3,1,0]，但是可以有任何长度）。如何基于filtering数组的内容动态构建过滤器表达式？在这种情况下，我将得到以下表达式：
function(d){return d.parentId == 3 || d.parentId == 1 || d.parentId == 0;}
有什么聪明的方法可以做到这一点吗？类似于布尔表达式的串联吗？
d3.js ×3
javascript ×3
css ×2
svg ×2
arrays ×1
django ×1
django-apps ×1
flexbox ×1
line ×1
stroke ×1