javascript - jqueryを使用してDagre d3のHTMLラベルを変更する

Question

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')

しかし、それもうまくいかないようです。