0

我正在尝试动态更改 Dagre D3 中节点标签中的 HTML：

$('.unselected-node').find('.inputTemplate').css( "display", "inline-block" );

但是，这不起作用。我能够更改的唯一方法.unselected-node是直接访问 HTML：

g.node('id').label += "<div>" + inputTemplate + "</div>";

这意味着我必须手动编码并将 HTML 作为字符串存储在 javascript 文件中的某个位置，这是非常不理想的。反正有动态更改标签吗？

这是有问题的 HTML，尽管问题比这个示例更通用，因为每当我尝试使用 jQuery 更改 dagre d3 html 时都会发生这种情况：

<div>
    <div class="<%= templateData.class %>" data-params=<%= templateData.jsonData %>>
        <span class ="control glyphicon glyphicon-pawn test" style="color:<%= templateData.responseTypeColor %>"></span>
        <span class="pull-right"><a href="../../responses/id/<%= templateData.response._id %>"><i><%= templateData.response._id %></i></a></span>
        <span> <%= templateData.response.created_by %></span>
        <h3 class="templateData.response.responseTitle"><a href="../../responses/<%= templateData.response.title %>""><%= templateData.response.title %></a></h3>
        <p class="templateData.response.responseText"><%= templateData.response.text %></p>
        <button type="button" class="btn btn-link btn-sm reply-button">Reply</button>
    </div>
    <div class="inputTemplate" style="display:none">
        <hr style="border: none; height:1px; background-color: black ">
        <form id="responseForm">
            <div id="newResponseTitleDiv" class="form-group row">
                <div id="suggestedTitles">
                    Response title:
                    <input class="typeahead form-control" style="width: 50%; display:inline-block;" type="text" data-toggle="popover" data-trigger="focus" data-content="Describe a specific position that you will defend." id="newResponseTitle" name="responseTitle">
                    <button type="button" class="btn btn-outline-secondary btn-sm"  data-toggle="modal" data-target="#responseModal">Browse</button>
                </div>
            </div>
            <div class="form-group row">
                <textarea rows="10" style="width:90%; border:solid .33px gray; resize: none;"></textarea>
            </div>
            <div class="form-group row">
                <button type="button" id="test" class="btn btn-sm submit-reply-button">Submit</button>
            </div>
        </form>
    </div>
</div>

我也尝试d3.select(...)过inputTemplate使用

attr.('visibility', 'hidden')

但它似乎也不起作用。

4

0 回答 0